複数のテーブルを1行に配置するにはどうすればよいですか？

私は<tables>の番号を持つ<div>を持っていますが、これをどのようにして1行に入れるのですか？複数のテーブルを1行に配置するにはどうすればよいですか？

<html> 
    <head> 
     <title>no-line-break</title> 
     <style type="text/css"> 
      #foo 
      { 
       width: 500px; 
       border: 1px solid #000; 
       overflow-x: auto; 
      } 
      .bar 
      { 
       float: left; 
       width: 150px; 
       margin: 5px;     
      } 
      .bar th 
      { 
       background-color: #c0c0c0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="foo"> 
      <table class="bar"> 
       <tr> 
        <th> 
         Foo #1 
        </th> 
       </tr> 
       <tr> 
        <td> 
         Bar #1 
        </td> 
       </tr> 
      </table> 
      <table class="bar"> 
       <tr> 
        <th> 
         Foo #2 
        </th> 
       </tr> 
       <tr> 
        <td> 
         Bar #1 
        </td> 
       </tr> 
       <tr> 
        <td> 
         Bar #2 
        </td> 
       </tr> 
       <tr> 
        <td> 
         Bar #3 
        </td> 
       </tr>    
      </table> 
         <table class="bar"> 
       <tr> 
        <th> 
         Foo #3 
        </th> 
       </tr> 
       <tr> 
        <td> 
         Bar #1 
        </td> 
       </tr> 
      </table> 
      <table class="bar"> 
       <tr> 
        <th> 
         Foo #4 
        </th> 
       </tr> 
       <tr> 
        <td> 
         Bar #1 
        </td> 
       </tr> 
      </table> 
      <div style="clear: both;">&nbsp;</div> 
     </div> 
    </body> 
</html>

出典

2011-01-24 Johan Olsson

彼らはすでに... HTTPべきであるように見える：//jsfiddle.net/T8pfZ/ – Dutchie432

@ Dutchie432、第4テーブルがラップしていると何のスクロールバーが表示されていません。 – jeroen

おそらく伝統的なテーブルレイアウトがあなたのためにあるかもしれません。 http://jsfiddle.net/T8pfZ/2/ – Dutchie432

#fooの中に別のdivを追加する必要があります。これは、余白とパディングがあるすべてのテーブルの合計と少なくとも同じ幅で、折り返されません。

例：

<html> 
<head> 
    <title>no-line-break</title> 
    <style type="text/css"> 
     #foo 
     { 
      width: 500px; 
      border: 1px solid #000; 
      overflow-x: auto; 
     } 
     #foo_inner 
     { 
      width: 650px; 
     } 
     .bar 
     { 
      float: left; 
      width: 150px; 
      margin: 5px;     
     } 
     .bar th 
     { 
      background-color: #c0c0c0; 
     } 
    </style> 
</head> 
<body> 
    <div id="foo"> 
    <div id="foo_inner"> 
     <table class="bar"> 
      <tr> 
       <th> 
        Foo #1 
       </th> 
      </tr> 
      <tr> 
       <td> 
        Bar #1 
       </td> 
      </tr> 
     </table> 
     <table class="bar"> 
      <tr> 
       <th> 
        Foo #2 
       </th> 
      </tr> 
      <tr> 
       <td> 
        Bar #1 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Bar #2 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Bar #3 
       </td> 
      </tr>    
     </table> 
        <table class="bar"> 
      <tr> 
       <th> 
        Foo #3 
       </th> 
      </tr> 
      <tr> 
       <td> 
        Bar #1 
       </td> 
      </tr> 
     </table> 
     <table class="bar"> 
      <tr> 
       <th> 
        Foo #4 
       </th> 
      </tr> 
      <tr> 
       <td> 
        Bar #1 
       </td> 
      </tr> 
     </table> 
     <div style="clear: both;">&nbsp;</div> 
     </div> 
    </div> 
</body> 
</html>

出典

2011-01-24 16:30:01 jeroen

すべてをdisplay:inlineとする。したがって、これを行う：

.bar 
    { 
     float: left; 
     width: 150px; 
     margin: 5px;     
     display: inline; 
    } 

#foo 
    { 
     width: 500px; 
     border: 1px solid #000; 
     overflow-x: auto; 
     display: inline; 
    }

出典

2011-01-24 16:26:41 shamittomar

'display：inline'を使うと' width'をもう設定できません。 – jeroen

「display：inline;」を追加してみてください。 Foo CSSブロックに追加します。幅を調整する必要があるかもしれません。

出典

2011-01-24 16:28:45

私はあなたを理解していれば、あなたは同じライン内のすべてのテーブルをカントので、あなたは、ディスプレイを配置する必要があり：#fooのスタイルのインライン。