Question

我有三列。最后两个我想做的就像它们包含的数据一样窄，第一列可以取宽度的其余部分（表的宽度为100％）。

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

Answer 1

只需为第一列width 100%提供white-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>，以避免其内容被包装（仅在必要时再次）。

E.g。

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

与

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

或者现代的方式，如果你不打扰IE6用户：

class="first"

（以便您可以删除{{1}}）

Answer 2

^{我刚用this more detailsed answer in a similar question采用了一种不同的方法来回答这个问题，基本上是：}

将班级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>

表列宽度与包含数据一样窄？

2 个答案:

示例代码段