ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

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

2019/08/27 Марат 69 0 HTML | CSS |

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

Мы как-то делали страницу о том, что я никогда добровольно не куплю сайт на 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 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 есть есть
P.S.

Для того, чтобы выделить любую другую строку в таблице – достаточно цифру в css стилях изменить на другой.

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:
Выделить первую строчку в таблице css

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019