Как применить CSS-стиль только к названиям колонок?

Question

[Дмитрий]

<table width="50%" border="1" cellpadding="1" cellspacing="1">
    <tbody>
        <tr>
            <td style="text-align: center; ">Column 1</td>
            <td style="text-align: center; ">Column 2</td>
            <td style="text-align: center; ">Column 3</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
    </tbody>
</table>

В таблице нужно изменить background только у первых элементов в колонке

<td style="text-align: center; ">Column 1</td>
            <td style="text-align: center; ">Column 2</td>
            <td style="text-align: center; ">Column 3</td>

Должно получиться как на примере ниже

Всем спасибо.

Comments

[hadra]

Пиши мне в личку, помогу,если время будет)

Answer 1

[Юрий Лобанов]

<table>
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

Используйте th или пишите отдельный стиль для первой строки.

Answer 2

[Anton Dyshkant]

Для этого предназначен тег <th> - обрамляйте ячейки шапки в него, а не в <td>.

Answer 3

[Insayt]

прошу jsfiddle.net/Y5CQH

Answer 4

[Diode Bot]

tr > td:first-child {...}

Answer 5

[hadra]

Можно воспользоваться псевдоэлементами ... только поддержка css3 не у всех ((

Comments

[Юрий Лобанов]

Зачем мудрить, если есть стандартные средства?

[hadra]

@iiil можно и так... это как альтернатива)

[Юрий Лобанов]

У нас итак годы верстки таблицами из-за непродуманности html, а Вы еще предлагаете на таблицы велосипеды навешивать )

[hadra]

@iiil Можно вообще от табл. отказаться..

[Юрий Лобанов]

@hadra во-первых, в верстке писем они пока не заменимы. Во-вторых, отказываться от таблиц глупо. Если информация табличная - нужно использовать таблицы. В этом и есть смысл первоначальной задумки языка, смысловая разметка текста.

[hadra]

@iiil можно, но я не много по другому начал делать.. + к удобству верски, кроссбраузерность итд

[sim3x]

@hadra практически еще никто не внедрил, ага caniuse.com/#search=pseudo-elements

[hadra]

@sim3x Нет, я без псевдо. Они лишь для дизайна ....