表格多列宽答案

【问题标题】：Table multiple column widths表格多列宽
【发布时间】：2013-07-19 02:46:50
【问题描述】：

代码如下：

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

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

<table class="cols3">
...

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

【问题讨论】：

你可以做一个
标签，里面有
组件
抱歉不明白 - 请详细说明一下？
查看 Ron DeVera here 的回答。它可能会帮助你。
并非如此。这个模型解释了我想消除。

标签： html css html-table

【解决方案1】：

如果你有 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

【讨论】：

【解决方案2】：

您可以在子列上使用 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。

【讨论】：

到目前为止从未遇到过 :) 并且似乎所有浏览器都支持它...是否可以在一个 CSS 条目中制作它，或者需要 3 个条目？
不幸的是，您需要为每个孩子单独输入条目，但这不是太多工作：P
一个小技巧：除非您在 html 中明确定义了 3 个项，否则您的代码将无法工作。我做得更容易 - 删除项目，只是写了“td：nth-child：