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

这是Fiddle

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

修复了隐藏div中的表格td宽度

1 个答案: