-2

重複の可能性:
テーブル内のスタイルを th および td 内の特定の列に適用する

テーブルがあり、さまざまなスタイルをさまざまな列に割り当てることができる必要があります。必要なものは次のとおりです。

  1. テーブル ヘッダーの最初の 2 列 (header1 と header 2 には text-align:left を指定します。次に、テーブル ヘッダー内の残りのすべてのヘッダーには text-align:center を指定します。

  2. テーブルの行についても同様で、テーブル内のすべての行の最初の 2 つに text-align:left; を指定します。次に、text-align:center; が指定された tds の残りの部分。

つまり、基本的にテーブル全体の最初の 2 つの列が残され、残りは中央に配置されますか??

`

<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>

4

1 に答える 1

2

テーブルにクラスがあると仮定します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;
}
于 2012-09-28T11:47:36.183 に答える