В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 24-06-2024! ×
Меню :
text (37)
color (15)
table (12)
css (131)
html (147)



Blog (1436)
php (341)
js (246)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
ruweb.net (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
foto (22)
atom (20)
php file (20)
database (19)
forum (19)
input (18)
svg (18)
info (17)
php date (17)
mysql (17)
hosting (17)
html book (16)
board (16)
php time (15)
color (15)
js events (14)
js time (14)
js url (14)
img (14)
select (13)
htaccess (13)
osclass (13)
notepad (13)
lingvo (13)
знак (13)
download (12)
php img (12)
keyboard (12)
table (12)
php path (12)
dw block (12)
icon (11)
jsphp (11)
form (11)
yandex (10)
mouse (10)
keyframes (10)
js delete (10)
vs code (9)
ftp (9)
chart (9)
dosite (9)
hover (9)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
list (6)
click (6)
adminka (6)
canvas (6)
php get (6)
tag a (5)
heading (5)
value (5)
js id (5)
mb (5)
reg.ru (5)
year (5)
js math (5)
day (4)
numbers (4)
php var (4)
base64 (4)
week (4)
games (4)
js hash (4)
scandir (4)
xml (4)
ssl (4)
symbols (4)
console (4)
month (4)
js form (4)
task (4)
pages (4)
vk (4)
нок (4)
submit (4)
bbcode (4)
js img (3)
money (3)
jquery post (3)
line (3)
js post (3)
https (3)
domen (3)
ucoz (3)
padding (3)
куб (3)
captcha (3)
js vars (2)
video (2)
youtube (2)
seo (2)
sitemap (2)
tag hr (2)
рся (2)
qr code (2)
arrows (2)
google (2)
typeof (2)
height (2)
prompt (2)
details (2)
counter (2)
rutube (1)
нод (1)
archive (1)
cursor (1)
windows (1)
speed (1)
scroll (1)
smile (1)
jino (1)

Выделить первую строчку в таблице 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() см. -> здесь
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Теги:
Выделить первую строчку в таблице css/n-ый элемент/н ый, эн-ный элемент
На сайте сейчас :
Ещё : Игра "пятнашки"
Угадай страну по флагу
dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.01978 секунд. Подробнее