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

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb Немного о ruweb.net!
Страница загружена за : 0.020337 секунд. Подробнее