CSS: изменение цвета текста в указанном столбце c - но не в заголовке этого столбца? - PullRequest
Новая
       22

CSS: изменение цвета текста в указанном столбце c - но не в заголовке этого столбца?

1 голос
/ 06 февраля 2020

У меня есть следующая таблица HTML: 

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

Проблема в том, что это также изменение цвета таблицы заголовок этого столбца.

Как я могу остановить это при этом?

Ответы [ 2 ]

4 голосов
/ 06 февраля 2020

Вы должны поместить заголовки столбцов в раздел thead (заголовок таблицы).

Хотя бывают и исключения, добавление заголовков столбцов в tbody обычно не является хорошей практикой. Наличие заголовков столбцов в отдельном разделе заголовка позволяет прокручивать тело таблицы, сохраняя при этом заголовки столбцов. 

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

Затем вы можете добавить селектор tbody в ваше правило CSS. 

#carTable tbody tr>:nth-child(1){
    font-weight: bold;
    color: #2d89ac;
}
2 голосов
/ 06 февраля 2020

Вы можете использовать правило :not() в css: 

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