HTML表:使用CSS设置第二列的宽度

Question

我可以使用CSS为除第一列以外的所有列设置列宽吗？

Answer 1

HTML表格实际上没有"列" - 行只有第一个单元格,至少就标记而言.但是,您可以使用CSS选择器执行以下操作:

鉴于以下标记:

<table>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
</table>

CSS:

table tr td             { width: 20em; }
table tr td:first-child { width: 10em; }

这会将第一个"列"的宽度设置为10em,将所有其他列的宽度设置为20em.

你可能要考虑浏览器支持的:first-child,但.另一种方法是<td>在每个中添加一个类<tr>(除了IE6之外,它似乎得到了很好的支持).

Answer 2

这些都可以工作:

td:not(:first-child) {
    width: 20%;
}

td:nth-child(n+2) {
    width: 20%;
}

这两个例子都适用于IE9 +

演示