html - 非表示の div のテーブル td 幅を修正

Question

テーブルを div に配置し、列を固定幅に設定したいのですが、残念ながらうまくいきません。

ここで例を見ることができます：

<div class="content">

<table class="table">
    <tr>
        <td style="width:400px">
            12312312222
        </td>
        <td>
            43fr134f134
        </td>
        <td>
            32d234de234
        </td>
        <td>
            32d234de234
        </td>
        <td>
            32d234de234
        </td>
        <td>
            32d234de234
        </td>
    </tr>
</table>


</div>



.table
{
    border:1px solid black;
    table-layout:fixed;
    /*width:400px;*/
}

.table td
{
    border:1px solid black;
}

.content
{
     width:100px;
     overflow:hidden;
}

http://jsfiddle.net/3h5gB/

最初の td の幅は 400px ですが、テキスト サイズに収まります。div を削除するか、div の幅を非常に大きくすると、問題なく動作します。私が間違っていることは何ですか？

Answer 1

ここにフィドルがあります

HTML

<div class="content">

  <table class="table">
    <tr>
      <td>12312312222</td>
      <td>43fr134f134</td>
      <td>32d234de234</td>
      <td>32d234de234</td>
      <td>32d234de234</td>
      <td>32d234de234</td>
    </tr>
  </table>

</div>

CSS

.table {
  border:1px solid black;
  table-layout:fixed;
  width:800px;
  border-collapse: collapse;
}

.table td {
  padding: 2px 0 2px 2px;
  border:1px solid black;
}
.table td:first-child {
  width: 290px;
}