有一个包含 3 列的表。
现在我想设置第一列 100px 宽度,第二列 200px,最后一列 300px。
为所有 td 设置一个 id 来指示它是哪些列是很尴尬的。
有没有更明智的做法?
最佳答案
假设您的表格具有标准标记,您可以使用 nth-child
或 nth-of-type
来定位每行中的特定单元格。如果您的表有更多列,您可以将任何数字替换为 nth-child
。
/* nth-child(1) = the first td in each tr */
td:nth-child(1) {
width: 100px;
background: #ddd;
}
/* the second */
td:nth-child(2) {
width: 200px;
background: #ccc;
}
/* the third */
td:nth-child(3) {
width: 300px;
background: #bbb;
}
<table>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</tbody>
</table>
关于html - 如何在CSS中将表格中的不同列设置为不同的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40134586/