Подсветка строк таблицы

@modz · Регистрация: 24.02.2012

Студворк — интернет-сервис помощи студентам

Добрый день!
Есть такая таблица:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 <html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th /*настройка шапки*/
{
font-size:1.1em;
text-align:left;
padding-top:5px; /*отступ вверх от слов в шапке*/
padding-bottom:4px; /*отступ вниз от слов в шапке*/
background-color:#A7C942; /*цвет шапки*/
color:#ffffff; /*цвет шрифта шапки*/
}
#customers tr.alt td
{
color:#000000; /*цвет шрифта внутри таблицы*/
background-color:#EAF2D3; /*цвет строк*/
}
 
</style>
</head>
 
<body>
<table id="customers">
<tr>
<th height="37">Имя</th>
<th>Фамилия</th>
<th>Сбережения</th>
</tr>
<tr class="alt">
<td>Петр</td>
<td>Сидоров</td>
<td>$100</td>
</tr>
<tr>
<td>Алексей</td>
<td>Выхухолев</td>
<td>$150</td>
</tr>
<tr class="alt">
<td>Женя</td>
<td>Вдрызг</td>
<td>$300</td>
</tr>
 
<tr>
 
<td>Леонид</td>
 
<td>Оксолинин</td>
 
<td>$120</td>
 
</tr>
</table>
</body>
</html>

Как правильно вставить строку

HTML5
1
2
3
4
tr:hover {
    background: #f3bd48; /* Цвет фона при наведении */
    color: #fff; /* Цвет текста при наведении */
   }

чтобы при наведении любой строки (кроме шапки) была подсветка?

@monochromer · 27.03.2014, 14:24

Тут проблемы со специфичностью.

CSS
1
2
3
#customers tr:hover {
  /*...*/
}

@modz · 27.03.2014, 14:48 **[ТС]**

я уже так пробовал, не получается. Подсвечиваются только строки белого цвета, на которые не действует css код

Vovan-VE · 27.03.2014, 15:16

CSS
1
2
3
4
#customers tr:hover td,
#customers tr:hover th {
    ...
}

@modz · 27.03.2014, 16:17 **[ТС]**

Если писать так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
...
<style type="text/css">
#customers tr:hover td,
#customers tr:hover th {
    background: #f3bd48; /* Цвет фона при наведении */
    color: #fff; /* Цвет текста при наведении */
   }
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
...

То подсветка на белых строках+на шапке

@monochromer · 27.03.2014, 17:36

Сообщение от modz

я уже так пробовал, не получается.

И опять проблемы со специфичностью.

CSS
1
2
3
4
5
6
7
8
9
#customers .alt{
  color:#000; 
  background-color:#EAF2D3;
}
 
#customers tr:hover{
  background: #f3bd48; 
  color: #fff;
}

@modz · 27.03.2014, 20:41 **[ТС]**

Если делать в Adobe Dreamweaver код вместо

CSS
1
2
3
4
5
#customers tr.alt td
{
color:#000000; /*цвет шрифта внутри таблицы*/
background-color:#EAF2D3; /*цвет строк*/
}

то что вы написали:

CSS
1
2
3
4
5
6
7
8
9
#customers .alt{
  color:#000; 
  background-color:#EAF2D3;
}
 
#customers tr:hover{
  background: #f3bd48; 
  color: #fff;
}

то все ок, т.е. при наводке на строку появляется подсветка. Но если этот же код написать в браузере, то ни только пропадает подсветка, но и цвет каждой строки становится одинаковым серым

@newJS · 27.03.2014, 21:10

добавить thead и tbody, и подсветку tr только tbody

@monochromer · 27.03.2014, 23:05

Сообщение от modz

если этот же код написать в браузере, то ни только пропадает подсветка, но и цвет каждой строки становится одинаковым серым

Как конкретно Вы это делаете?

Добавлено через 18 минут
http://jsbin.com/yolas/2/edit?html,css,output

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>customers</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table id="customers">
      <tr>
        <th>Имя</th>
        <th>Фамилия</th>
        <th>Сбережения</th>
      </tr>
      <tr>
        <td>Петр</td>
        <td>Сидоров</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>Алексей</td>
        <td>Выхухолев</td>
        <td>$150</td>
      </tr>
      <tr>
        <td>Женя</td>
        <td>Вдрызг</td>
        <td>$300</td>
      </tr>
      <tr>
        <td>Леонид</td>
        <td>Оксолинин</td>
        <td>$120</td>
      </tr>
    </table>
  </body>
</html>

Файл style.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#customers{
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
}
 
#customers td, #customers th{
  font-size:1em;  
  border:1px solid #98bf21;  
  padding:3px 7px 2px 7px;
}
 
#customers th{
  font-size:1.1em;
  text-align:left;  
  padding-top:5px;
  padding-bottom:4px;  
  background:#A7C942;
  color:#fff;
}
 
#customers tr:nth-child(odd){
  color:#000; 
  background:#EAF2D3;
}
 
#customers tr:hover{
  background: #f3bd48; 
  color: #fff;
}

@modz · 28.03.2014, 08:28 **[ТС]**

В программе Adobe Dreamweaver все прекрасно работает. А вот браузер Мозилла не хочет отображать, получается обычная невзрачная таблица.
Я все делаю как вы написали, единственное отличие в подключении кода css. Я делаю это прям на странице без файла. Вот мой код:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    #customers{
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
}
 
#customers td, #customers th{
  font-size:1em;  
  border:1px solid #98bf21;  
  padding:3px 7px 2px 7px;
}
 
#customers th{
  font-size:1.1em;
  text-align:left;  
  padding-top:5px;
  padding-bottom:4px;  
  background:#A7C942;
  color:#fff;
}
 
#customers tr:nth-child(odd){
  color:#000; 
  background:#EAF2D3;
}
 
#customers tr:hover{
  background: #f3bd48; 
  color: #fff;
}
</style>
  </head>
  <body>
    <table id="customers">
      <tr>
        <th>Имя</th>
        <th>Фамилия</th>
        <th>Сбережения</th>
      </tr>
      <tr>
        <td>Петр</td>
        <td>Сидоров</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>Алексей</td>
        <td>Выхухолев</td>
        <td>$150</td>
      </tr>
      <tr>
        <td>Женя</td>
        <td>Вдрызг</td>
        <td>$300</td>
      </tr>
      <tr>
        <td>Леонид</td>
        <td>Оксолинин</td>
        <td>$120</td>
      </tr>
    </table>
  </body>
</html>

@monochromer · 28.03.2014, 11:18

Как подозреваю, таблица по-умолчанию не отображается точками. Раз на странице есть другие элементы, значит подключены еще стили. Они скорее всего и перекрывают Вашу таблицу.

@modz · 28.03.2014, 12:00 **[ТС]**

У меня сайт на WP. Сам шаблон делал в Artisteer-е. На страницах стили не подключал.
1. Если написать код таблицы без подсветки, то все отображается корректно.
2. Если добавить в <style>...</style>

CSS
1
2
3
4
tr:hover {
    background: #f3bd48; /* Цвет фона при наведении */
    color: #fff; /* Цвет текста при наведении */
   }

то как я уже писал будет подсветка только на не цветных строках.
3. Если добавить ваш код, то получится таблица, о которой я писал выше.
Почему так получается? Если бы дело было в других подключенных стилях, скорее всего у меня уже п.1 не выполнялся

@monochromer · 28.03.2014, 14:08

Лучший способ найти проблему - открыть страницу в отладчике и посмотреть, какие стили присвоены элементам и откуда они подгружены.

@modz · 28.03.2014, 14:58 **[ТС]**

Открыл в отладчике, и вот что увидел:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html class="firefox firefox24 desktop" lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Компьютер Билд - Профессиональный ремонт ноутбуков</title>
<meta content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width" name="viewport">
<link media="screen" href="http://compbuild.net/wp-content/themes/Compbuild_3/style.css" rel="stylesheet">
<link href="http://compbuild.net/xmlrpc.php" rel="pingback">
<style type="text/css">
<link href="http://compbuild.net/feed/" title="Компьютер Билд - ремонт компьютеров, ноутбуков, принтеров, мониторов, планшетов, навигаторов, заправка картриджей, восстановление Windows » Лента" type="application/rss+xml" rel="alternate">
<link href="http://compbuild.net/comments/feed/" title="Компьютер Билд - ремонт компьютеров, ноутбуков, принтеров, мониторов, планшетов, навигаторов, заправка картриджей, восстановление Windows » Лента комментариев" type="application/rss+xml" rel="alternate">
<link id="admin-bar-css" media="all" type="text/css" href="http://compbuild.net/wp-includes/css/admin-bar.min.css?ver=3.5.1" rel="stylesheet">
<link id="dcwp_plugin_admin_dcscf_css-css" media="all" type="text/css" href="http://compbuild.net/wp-content/plugins/slick-contact-forms/css/admin.css?ver=3.5.1" rel="stylesheet">
<link id="contact-form-7-css" media="all" type="text/css" href="http://compbuild.net/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.4.2" rel="stylesheet">
<link id="fancybox-css" media="all" type="text/css" href="http://compbuild.net/wp-content/plugins/fancybox-for-wordpress/fancybox/fancybox.css?ver=3.5.1" rel="stylesheet">
<link id="social-widget-css" media="all" type="text/css" href="http://compbuild.net/wp-content/plugins/social-media-widget/social_widget.css?ver=3.5.1" rel="stylesheet">
<link id="style.responsive.css-css" media="all" type="text/css" href="http://compbuild.net/wp-content/themes/Compbuild_3/style.responsive.css?ver=3.5.1" rel="stylesheet">
<script src="http://compbuild.net/wp-content/themes/Compbuild_3/jquery.js?ver=3.5.1" type="text/javascript">
<script src="http://compbuild.net/wp-includes/js/comment-reply.min.js?ver=3.5.1" type="text/javascript">
<script src="http://compbuild.net/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.4" type="text/javascript">
<script src="http://compbuild.net/wp-content/plugins/slick-contact-forms/js/jquery.slick.contact.1.3.2.js?ver=3.5.1" type="text/javascript">
<script src="http://compbuild.net/wp-content/themes/Compbuild_3/script.js?ver=3.5.1" type="text/javascript">
<script src="http://compbuild.net/wp-content/themes/Compbuild_3/script.responsive.js?ver=3.5.1" type="text/javascript">
<link href="http://compbuild.net/xmlrpc.php?rsd" title="RSD" type="application/rsd+xml" rel="EditURI">
<link href="http://compbuild.net/wp-includes/wlwmanifest.xml" type="application/wlwmanifest+xml" rel="wlwmanifest">
<link href="http://compbuild.net/remontpc/" title="Ремонт ПК" rel="prev">
<link href="http://compbuild.net/remontprint/" title="Ремонт принтеров" rel="next">
<script type="text/javascript">
<link media="screen" type="text/css" href="http://compbuild.net/wp-content/plugins/slick-contact-forms/skin.php?widget_id=2&skin=white" rel="stylesheet">
<link media="screen" type="text/css" href="http://compbuild.net/wp-content/plugins/slick-contact-forms/css/form.css" rel="stylesheet">
<style media="print" type="text/css">
<style media="screen" type="text/css">
<meta content="#customers{ font-family:Trebuchet MS, Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td," name="description">
<meta content="профессиональный, ремонт, ноутбук, ноут, дзержинск, матрица, батарейка, разъем" name="keywords">
<link href="http://compbuild.net/remontnotebook/" rel="canonical">
<style media="all" type="text/css">
<style media="screen" type="text/css">
</head>

как видно, тут целая куча стилей подгружается.
И что тогда делать?

@monochromer · 28.03.2014, 16:40

Посмотрите на сами стили

@modz · 08.04.2014, 15:35 **[ТС]**

Оставил я таблицу без подсветки, слишком геморно разобраться во всех стилях
А как сделать таблицу фиксированной ширины?
Пробовал <table id="customers" width="790px">, таблица все равно на всю ширину страницы.
В шапке задаю ширину двух столбцов (700рх и 90рх), получается, что вся таблица должна быть шириной 790, но нет

@maximus2011 · 08.04.2014, 16:39

просто оберните эту таблицу в див с id каким-нибудь потом через скрипт

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function(){
    $('#myid table tbody tr').hover(function(){
        $(this).css({'background':'#000000'});
    },
    function(){
        $(this).css({'background':'#fff'});
    });
});

@modz · 09.04.2014, 08:43 **[ТС]**

Сообщение от maximus2011

просто оберните эту таблицу в див с id каким-нибудь потом через скрипт

Это как я понимаю по теме Подсветка строк таблицы? А куда этот код вставлять? Отдельный файл должен быть?
Что на счет ширины таблицы?

@modz · 10.04.2014, 10:17 **[ТС]**

Как сделать таблицу фиксированной ширины?

Новые блоги и статьи Все статьи Все блоги /
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере нетипового документа выдачи шин для спецтехники с табличной частью, разработанного в конфигурации КА2. Данные берутся из. . .

@modz 0 / 0 / 1 Регистрация: 24.02.2012 Сообщений: 66
	27.03.2014, 14:48 [ТС]
	я уже так пробовал, не получается. Подсвечиваются только строки белого цвета, на которые не действует css код 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	27.03.2014, 21:10
	добавить thead и tbody, и подсветку tr только tbody 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	28.03.2014, 11:18
	Как подозреваю, таблица по-умолчанию не отображается точками. Раз на странице есть другие элементы, значит подключены еще стили. Они скорее всего и перекрывают Вашу таблицу. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	28.03.2014, 14:08
	Лучший способ найти проблему - открыть страницу в отладчике и посмотреть, какие стили присвоены элементам и откуда они подгружены. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	28.03.2014, 16:40
	Посмотрите на сами стили 0

@modz 0 / 0 / 1 Регистрация: 24.02.2012 Сообщений: 66
	08.04.2014, 15:35 [ТС]
	Оставил я таблицу без подсветки, слишком геморно разобраться во всех стилях А как сделать таблицу фиксированной ширины? Пробовал <table id="customers" width="790px">, таблица все равно на всю ширину страницы. В шапке задаю ширину двух столбцов (700рх и 90рх), получается, что вся таблица должна быть шириной 790, но нет 0

@modz 0 / 0 / 1 Регистрация: 24.02.2012 Сообщений: 66
	10.04.2014, 10:17 [ТС]
	Как сделать таблицу фиксированной ширины? 0