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;
}