並排的桌子上有溢出

Question

我想要一張6桌並排，但是當他們到達他們的最後時，他們在下一行被排序。

我試過float，但是當顯示寬度達到時，元素仍然在下一行開始。

歡迎任何提示。

這是我的代碼：我拿走了所有樣式格式，因爲我無法將它們排成一行。

Link: http://jsfiddle.net/S3n6D/101/ 

Answer 1

我想你可以使用這個css;

table { 
    width:15%; 
    float:left; 
} 

如果你想要更寬的表格，你也可以改變身體的寬度;

body { 
    width:1800px; 
} 

table { 
    width:300px; /* or 15% if you want it more dynamic */ 
    margin:0; 
    float:left; 
} 

Answer 2

經過一番清潔與秩序到您的代碼，請嘗試：

div { 
 
    float: left; 
 
}

<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="1">&nbsp;</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Filiale</th> 
 
    </tr> 
 
    </thead> 
 
</table> 
 
<br> 
 
<div> 
 
    <table border="1"> 
 
    <!-- MO --> 
 
    <thead> 
 
     <tr> 
 
     <th colspan="14">19.09.2016</th> 
 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     <th>7</th> 
 
     <th>8</th> 
 
     <th>9</th> 
 
     <th>10</th> 
 
     <th>11</th> 
 
     <th>12</th> 
 
     <th>13</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
    </table> 
 
</div> 
 

 

 
<div> 
 
    <table border="1"> 
 
    <!-- DI --> 
 
    <thead> 
 
     <tr> 
 
     <th colspan="13">20.09.2016</th> 
 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     <th>7</th> 
 
     <th>8</th> 
 
     <th>9</th> 
 
     <th>10</th> 
 
     <th>11</th> 
 
     <th>12</th> 
 
     <th>13</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
    </table> 
 
</div> 
 

 
<div> 
 
    <table border="1"> 
 
    <!-- MI --> 
 
    <thead> 
 
     <tr> 
 
     <th colspan="13">21.09.2016</th> 
 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     <th>7</th> 
 
     <th>8</th> 
 
     <th>9</th> 
 
     <th>10</th> 
 
     <th>11</th> 
 
     <th>12</th> 
 
     <th>13</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
    </table> 
 
</div> 
 
<div> 
 
    <table border="1"> 
 
    <!-- DO --> 
 
    <thead> 
 
     <tr> 
 
     <th colspan="13">22.09.2016</th> 
 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     <th>7</th> 
 
     <th>8</th> 
 
     <th>9</th> 
 
     <th>10</th> 
 
     <th>11</th> 
 
     <th>12</th> 
 
     <th>13</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
    </table> 
 
</div> 
 
<div> 
 
    <table border="1"> 
 
    <!-- FR --> 
 
    <thead> 
 
     <tr> 
 
     <th colspan="13">23.09.2016</th> 
 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     <th>7</th> 
 
     <th>8</th> 
 
     <th>9</th> 
 
     <th>10</th> 
 
     <th>11</th> 
 
     <th>12</th> 
 
     <th>13</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
    </table> 
 
</div> 
 
<div> 
 
    <table border="1"> 
 
    <!-- SA --> 
 
    <thead> 
 
     <tr> 
 
     <th rowspan="1">&nbsp;</th> 
 
     <th colspan="13">24.09.2016</th> 
 

 
     </tr> 
 
     <tr> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     <th>7</th> 
 
     <th>8</th> 
 
     <th>9</th> 
 
     <th>10</th> 
 
     <th>11</th> 
 
     <th>12</th> 
 
     <th>13</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
    </table> 
 
</div>