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

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

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

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

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

  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() см. -> здесь


Последняя дата редактирования : 2020-04-30 07:48
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Выделить первую строчку в таблице cssn-ый элементн ый, эн-ный элемент

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.