Выделить первую строчку в таблице css пример

Нам понадобилось выделить первую строку… например таблицы. Можно конечно выделить отдельным классом, какой-то элемент таблицы, но такой способ тоже имеет право на жизнь!

Выделение первой строки таблицы с примерами

1. Css выделение первой строки в таблице -> tr:nth-child(1)
2. Пример таблицы, где будем выделять первую строку
3. Пример таблицы с выделенной первой строкой
4. Выделить любую строку в блоке, таблице

Css выделение первой строки в таблице -> tr:nth-child(1)<

Мы как-то делали страницу о том, что я никогда добровольно не куплю сайт на ukoz-e - всю таблицу и стили возьмем оттуда...

И так…

Для того, чтобы выделить какую-то строку в таблице, нужно прописать … к таблице класс… не ломая голову будет класс «table» - это сделано только для того, чтобы выделение первой строки было только у этой таблицу… а иначе он – стиль прилепится ко всем таблицам на странице – если есть такие…

За выделение строки отвечает - tr:nth-child(1) и добавим немного цвета, для выделения. Задний фон затемним, а текст осветлим

.table tr:nth-child(1) {

background: #666;

color: #fff;

}

Далее- необязательные стили… добавим бордюр ширину и др.

table.table {

border-collapse: collapse;

width: 100%;

}

.table td {

padding: 8px;

line-height: 20px;

text-align: left;

vertical-align: top;

border: 1px solid #dddddd;

}

Пример таблицы, где будем выделять первую строку

Это просто код таблицы, обычная стандартная таблица, но в ней мы прописываем класс(table), который и будет отвечать за выделение первой строки

<table class="table">

 <tbody>

      <tr>

           <td>хостинг</td>

           <td>домен/шт(уровень)</td>

           <td>стоимость/руб</td>

           <td>размер/гб</td>

           <td>php</td>

           <td>БД</td>

      </tr>

      <tr>

           <td>ukoz</td>

           <td>1 (третьего)</td>

           <td>3.750</td>

           <td>2</td>

           <td>нет</td>

           <td>нет</td>

      </tr>

      <tr>

           <td>ruweb</td>

           <td>2 (второго)</td>

           <td>1.700</td>

           <td>2</td>

           <td>есть</td>

           <td>есть</td>

      </tr>

 </tbody>

</table>

Пример таблицы с выделенной первой строкой

Результат – первая строка таблицы имеет другой цвет – и выделяется на общем фоне таблицы – по-моему отлично получилось!

хостинг	домен/шт(уровень)	стоимость/руб	размер/гб	php	БД
ukoz	1 (третьего)	3.750	2	нет	нет
ruweb	2 (второго)	1.700	2	есть	есть

Выделить любую строку в блоке, таблице

Если выше мы говорили о том. как выделить первую строку. но вообще, таким способом можно выделить вообще любую строку на странице! Если эта строка повторяется определенном теге несколько раз!

Мы как-то делали тему в которой использовали данный псевдокласс :nth-child() см. -> здесь

Всего комментариев : 0 Comments+ 2.0

+ =