html - 表格列宽与包含的数据一样窄？

Question

我有三列。最后两个我想让它们包含的数据一样窄，第一列可以占据其余的宽度（表格有 100% 的宽度）。

你怎么能用 CSS 做到这一点？现在右边的列看起来很傻，有额外的空间。想法？

Answer 1

只需给第一列 a width，100%如有必要，给所有其他列中的单元格 awhite-space: nowrap以避免它们的内容被包装（再次，仅在必要时）。

例如

<table>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
</table>

和

table { width: 100%; }
table td.first { width: 100%; }

或者如果您不关心 IE6 用户，则采用现代方式：

table { width: 100%; }
table td:first-child { width: 100%; } 

（以便您可以删除class="first"）

Answer 2

^{我只是在一个类似的问题中用这个更详细的答案用稍微不同的方法回答了这个问题，基本上：}

将类添加shrink到您希望尽可能窄的列中

<table>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>

有了这个CSS：

td.shrink {
  white-space: nowrap;
  width: 1px;
}

有了这个，您可以定义多列以在一行上具有最小宽度，但另一行的宽度保持动态（包括可能的换行符）。

示例片段

table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}

<table>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>