html - 使用 CSS 为表格中的某些元素分配样式

Question

可能重复：
将表格中的样式应用于 th 和 td 中的特定列

我有一张桌子，我需要能够为不同的列分配不同的样式，我需要：-

1. 表头中的前两列（表头 1 和表头 2 被赋予 text-align:left；然后表头中的所有剩余表头被赋予 text-align:center；

2. 与表格行类似，表格中所有行的前两个被赋予 text-align:left; 然后其余的 tds 给定 text-align:center;

所以基本上整个表格的前两列将被留下，然后剩下的被居中？

`

<tr>

<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>

</tr>

​</p>

Answer 1

假设您的表有一个类mytable：

.mytable td, .mytable th {
    text-align: center;
}
.mytable td:first-child, .mytable td:nth-child(2) {
    text-align: left;
}
.mytable th:first-child, .mytable th:nth-child(2) {
    text-align: left;
}

这可以更简洁地写成：

.mytable td, .mytable th {
    text-align: center;
}
.mytable td:nth-child(-n+2) {
    text-align: left;
}
.mytable th:nth-child(-n+2) {
    text-align: left;
}