CSS：更改特定列中文本的颜色 - 但不是该列 header？

Question

我有以下 HTML table:

<div class="table">
            <table id="carTable">
                <tbody>
                <tr>
                    <th>Car Number</th>
                    <th>owner</th>
                </tr>
                <!-- {{#each car}} -->
                <tr>
                    <td>{{carNumber}}</td>
                    <td>{{owner}}</td>
                </tr>
                <!--{{/each}} -->
                </tbody>
            </table>
        </div>

和关联的 CSS 更改第一列中文本的颜色：

#carTable tr>:nth-child(1){
        font-weight: bold;
        color: #2d89ac;
    }

问题是，这是也更改该列的 table header 上的颜色.

我怎样才能阻止它这样做？

Answer 1

您可以在 css 中使用 :not() 规则：

#carTable tr>:nth-child(1):not(th) {
  font-weight: bold;
  color: #2d89ac;
}

<div class="table">
  <table id="carTable">
    <tbody>
      <tr>
        <th>Car Number</th>
        <th>owner</th>
      </tr>
      <!-- {{#each car}} -->
      <tr>
        <td>{{carNumber}}</td>
        <td>{{owner}}</td>
      </tr>
      <!--{{/each}} -->
    </tbody>
  </table>
</div>

Answer 2

您应该将列标题放在 thead (table header) 部分。

虽然也有例外，但将列标题放在 tbody 中通常不是好的做法。将列标题放在单独的 header 部分中允许滚动 table 的 body，同时保持列标题可见。

<table id="carTable">
  <thead>
    <tr>
      <th>Car Number</th>
      <th>owner</th>
    </tr>
  </thead>
  <tbody>
    <!-- {{#each car}} -->
    <tr>
      <td>{{carNumber}}</td>
      <td>{{owner}}</td>
    </tr>
    <!--{{/each}} -->
  </tbody>
</table>

然后您可以在 CSS 规则中添加一个 tbody 选择器。

#carTable tbody tr>:nth-child(1){
    font-weight: bold;
    color: #2d89ac;
}

CSS：更改特定列中文本的颜色 - 但不是该列 header？

CSS: Changing color on text in specifc column - but not on that column header?

html

css

html-table

css-tables