表多列宽度

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)*/
}

了解更多选择器（和示例），请检查here