html - 当表格宽度 = 100% 时，HTML 表格中的第一列是灵活的

Question

我有一个包含 8 列和多行的 HTML 表格。每个单元格的内容是动态生成的，很难预测任何列的宽度。我设置 table width=100% 因为我希望表格占据 div 的整个宽度。我希望第 2 列到第 8 列与宽度保持相同，就好像我没有设置表格宽度一样。然后我想让第一列扩大其宽度，使表格宽度变为 100%。这可能吗？

Answer 1

在表格和所有其他列上设置宽度；剩余的列将占用所有的空间。

诀窍是使用 table-layout: fixed样式，以便自动布局猜测算法(以及 IE 对它的特别糟糕的解释)不会介入并在一列中的内容量超过预期时将其搞砸。

在固定布局模式下，第一行单元格或<col>元素设置宽度；更多的行不影响宽度。这使得渲染速度更快；您应该尽可能为每个表格使用固定布局。

<table>
    <col class="name" /><col class="data" /><col class="data" /><col class="data" />
    <col class="data" /><col class="data" /><col class="data" /><col class="data" />
    <tr>
        <td>tiddle om pom pom</td>
        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
    </tr>
</table>

table { width: 100%; table-layout: fixed; }
col.data { width: 2em; }