Для таблицы HTML, есть ли способ иметь полосатые строки, а также отдельный цвет для первого столбца

Question

У меня есть матрица, которую я показываю в таблице HTML. У меня есть строка заголовка (th), но я пытаюсь увидеть, есть ли такие вещи, как столбец заголовка, которые я могу стилизовать аналогично строке заголовка. Прямо сейчас я использую class = odd и class = даже в моем TR в моем Tbody, поэтому я не уверен, есть ли способ перезаписать столбец этой логикой css.

Answer 1

Учитывая эту разметку:

<table>
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Field 1</th>
            <th>Field 2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="even">
            <th>Row 1</th>
            <td>Cell 1,1</td>
            <td>Cell 2,1</td>
        </tr>
        <tr class="odd">
            <th>Row 2</th>
            <td>Cell 2,1</td>
            <td>Cell 2,2</td>
        </tr>
    </tbody>
</table>

Вы можете использовать этот CSS:

thead th {
    background-color: red;
}
tr.even td {
    background-color: blue;
}
tr.odd td {
    background-color: yellow;
}
tbody tr.odd th, tbody tr.even th {
    background-color: green;
}

Смотрите это в действии здесь .

Answer 2

Вы можете настроить таргетинг на столбец с помощью CSS td:first-child или сделать ячейки заголовка th вместо td и дифференцировать с помощью thead th и tbody th

Answer 3

Это может показаться странным, но попробуйте тег <col>, вы не часто его видите, но я думаю, что это здорово!

    <table width="100%" border="1">
      <col style="background:red;" align="left" />
      <col align="left" />
      <col align="right" />
      <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
    </table>

Конечно, вы хотите поместить класс в тег <col>, а не писать стиль прямо там.

Также я бы совместил это с ответами других людей, когда дело доходит до CSS. Что касается использования псевдоклассов для четного / нечетного, если вы хотите сохранить совместимость с IE6, вам нужно применить чередование с JavaScript или код вашего приложения.