html - 表格多列宽

Question

这是代码：

<table>
<col style="width:10px"><col style="width:20px"><col style="width:30px">
<td>
....

它定义了三个不同宽度的列。有没有办法在一个条目中定义整个表格的 CSS 布局 - 所有 3 列 - 以便我可以编写：

<table class="cols3">
...

这个 cols3 类定义这个表有 3 列预定义宽度？

Answer 1

您可以nth-child在子列上使用选择器，因此您的 css 可能如下所示：

.cols3 col:nth-child(1){width:10px;}
.cols3 col:nth-child(2){width:20px;}
.cols3 col:nth-child(3){width:30px;}

请注意，对于 nth-child 选择器，1 用于获取第一个子元素，而不是典型的 0。

Answer 2

在您有 3 列的情况下，请尝试使用 CSS 选择器：

table.cols3 col:first-child{
 /* style for first*/
}

table.cols3:last-child{
/*style of last child (3rd column)*/
}

table.cols3 {
/*style for middle columns)*/
}

有关更多选择器（和示例），请查看此处