Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!!

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

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

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

    }

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

    Это просто код таблицы, обычная стандартная таблица, но в ней мы прописываем класс(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>

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

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

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

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

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

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


Вас может еще заинтересовать список тем : #HTML | #CSS | #TABLE | #COLOR |
Последняя дата редактирования : 2020-04-30 07:48
Теги:
Выделить первую строчку в таблице cssn-ый элементн ый, эн-ный элемент

Последние комментарии :
Александр :
04/06/2020 01:42
Спасибо)
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

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