СКРИПТЫ
ТЕГИ:
php (289)
js (169)
html (139)
css (120)
html tags (61)
jquery (40)
text (37)
php array (30)
form html (30)
fonts (27)
ruweb.net (23)
online (22)
foto (22)
Показать еще :
php file (21)
atom (20)
forum (19)
svg (18)
board (17)
hosting (17)
input (16)
js method (16)
html book (16)
php date (16)
color (15)
link (15)
js events (14)
notepad (13)
htaccess (13)
osclass (13)
select (12)
dw block (12)
path (12)
js delete (12)
table (12)
info (12)
icon (11)
img (11)
keyboard (11)
php img (11)
jsphp (11)
download (11)
php time (11)
form (11)
mouse (10)
url (10)
js time (9)
yandex (9)
dosite (7)
cookie (7)
hover (7)
comment (7)
php url (7)
task (7)
iframe (6)
js url (6)
year (6)
list (6)
browser (6)
mysql (6)
click (6)
php get (5)
search (5)
heading (5)
ftp (5)
value (5)
mb (5)
js id (5)
adminka (5)
chart (5)
day (4)
mounth (4)
reg.ru (4)
week (4)
js form (4)
submit (4)
bbcode (4)
symbols (4)
vk (4)
captcha (4)
console (4)
нок (4)
padding (3)
js post (3)
js img (3)
vs code (3)
ucoz (3)
куб (3)
base64 (3)
scandir (3)
line (3)
ssl (3)
pages (3)
https (3)
js vars (2)
video (2)
youtube (2)
seo (2)
details (2)
title (2)
sitemap (2)
tag hr (2)
cursor (2)
prompt (2)
qr kod (2)
typeof (2)
height (2)
second (2)
рся (2)
money (2)
arrows (2)
counter (2)
books (1)
smile (1)
google (1)
windows (1)
archive (1)
domen (1)
speed (1)
нод (1)
header (1)
scroll (1)
numbers (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() см. -> здесь

Можете не благодарить, лучше помогите!
Теги :
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
16.09.2022 14:58
Спасибо, что заметили! Действительно там он не…
подробнее.
Сергей Fortoo :
16.09.2022 13:37
unset ($price[$key]); Убить старый ключ нужно когда переименование ключа происходит в первоначальном массиве, а в…
подробнее.
Марат :
07.07.2022 13:02
Вам спасибо, что оценили! На ваш вопрос в одной строчке не ответишь, поэтому для вас отдельный пункт…
подробнее.
Борис :
07.07.2022 10:41
Спасибо за статью! Подскажите, пожалуйста, как сделать, чтобы файл создавался по имени из формы? Есть тест,…
подробнее.
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
ruweb
Страница загружена за : 0.020914 секунд. Подробнее