テーブルオーバーフローで並んで

Question

私は6つのテーブルを並べて欲しいですが、それらの終わりに達すると、次の行で注文されます。

私はfloatを試しましたが、表示幅が達成されたときに要素が次の行から開始されました。

ヒントをお待ちしています。

私のコードは次のとおりです。1行にまとめることができなかったので、すべてのスタイルフォーマットを削除しました。

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>