БЛОГ НА HUSL


Как заставить :hover работать с фоном всех строк tr таблицы, кроме заглавной

Автор вопроса: Aleks

Вот код:

<table class="first" border="1">

   <tr class="alt">
    <th class="col1">Наименование</th>
    <th class="col2">Ед. изм.</th>
    <th class="col3">Цена, руб.</th>
  

  <tr>
    <td class="col1">Замена </td>
	<td class="col2">шт</td>
    <td class="col3">400</td>
  </tr>
 <tr>
    <td class="col1">Установка</td>
    <td class="col2">шт</td>
    <td class="col3">800</td>
  </tr>
  <tr>
    <td class="col1">Установка </td>
    <td class="col2">шт</td>
    <td class="col3">800</td>
  </tr>
  <tr>
    <td class="col1">Установка</td>
    <td class="col2">шт</td>
    <td class="col3">400</td>
  </tr>
  
  <tr>
    <td class="col1">Замена</td>
    <td class="col2">шт</td>
    <td class="col3">600</td>
  </tr>
  <tr>
    <td class="col1">Подключение</td>
    <td class="col2">шт</td>
    <td class="col3">800</td>
  </tr>
  <tr>
    <td class="col1">Подключен</td>
    <td class="col2">шт</td>
    <td class="col3">800</td>
  </tr>
  <tr>
    <td class="col1">Подключение</td>
    <td class="col2">шт</td>
    <td class="col3">800</td>
  </tr>
  <tr>
    <td class="col1">Прокладка</td>
    <td class="col2">м.п.</td>
    <td class="col3">70</td>
  </tr>
  <tr>
    <td class="col1">......</td>
    <td class="col2">шт</td>
    <td class="col3">500</td>
  </tr>
  <tr>
    <td class="col1">Поиск </td>
    <td class="col2">час</td>
    <td class="col3">800</td>
  </tr>
  <tr>
    <td class="col1">Подключение</td>
    <td class="col2">шт</td>
    <td class="col3">800</td>
  </tr>
<tr>
  <td class="col1">Поиск</td>
    <td class="col2">час</td>
    <td class="col3">800</td>
  </tr>

   </table>

стили

table {
    width: 80%; 
   
   margin: 25px auto; }
 
   th, td { padding: 7px; }
   .alt th {background-color: #98FB98;}
   
   
    td, th {
        border: 2px solid #008000;
		}

.col1 {
    width: 500px;
	height: 20px;
}
   .col2 {
    width: 150px; 
	height: 20px;
   }
   .col3 {
    width: 150px; 
	height: 20px;
   }
   td { background-color: #E6E6FA;}
   
 tr :hover {

   background-color: #00FFFF;}
   
   
   .first { border-collapse: collapse; }

Пробовал отделить нужные строки ....., безрезультатно. Кто знает работающие варианты? С уважением, Александр.


Источник

Ответы (3 шт):

Автор решения: RifmaMan

Обратите внимание на 2 строки в стилях, можете переключить комментарий и выбрать один из вариантов, думаю он вам подойдет!

table {
  width: 80%;
  margin: 25px auto;
}

th,
td {
  padding: 7px;
}

.alt th {
  background-color: #98FB98;
}

td,
th {
  border: 2px solid #008000;
}

.col1 {
  width: 500px;
  height: 20px;
}

.col2 {
  width: 150px;
  height: 20px;
}

.col3 {
  width: 150px;
  height: 20px;
}

td {
  background-color: #E6E6FA;
}

tr:hover td { /* подсвечиваем всю строку */
/*tr td:hover { /* подсвечиваем текущий столбец строки */
  background-color: #00FFFF;
}

.first {
  border-collapse: collapse;
}
<table class="first" border="1">
  <tr class="alt">
    <th class="col1">Наименование</th>
    <th class="col2">Ед. изм.</th>
    <th class="col3">Цена, руб.</th>
    <tr>
      <td class="col1">Замена </td>
      <td class="col2">шт</td>
      <td class="col3">400</td>
    </tr>
    <tr>
      <td class="col1">Установка</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Установка </td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Установка</td>
      <td class="col2">шт</td>
      <td class="col3">400</td>
    </tr>
    <tr>
      <td class="col1">Замена</td>
      <td class="col2">шт</td>
      <td class="col3">600</td>
    </tr>
    <tr>
      <td class="col1">Подключение</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Подключен</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Подключение</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Прокладка</td>
      <td class="col2">м.п.</td>
      <td class="col3">70</td>
    </tr>
    <tr>
      <td class="col1">......</td>
      <td class="col2">шт</td>
      <td class="col3">500</td>
    </tr>
    <tr>
      <td class="col1">Поиск </td>
      <td class="col2">час</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Подключение</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Поиск</td>
      <td class="col2">час</td>
      <td class="col3">800</td>
    </tr>
</table>

→ Ссылка
Автор решения: Denis I

как-то так?

table tr:not(:first-child):hover{
    background: #abc123;
}
→ Ссылка
Автор решения: Dmitriy Saxarov

Ответ от RifmaMan верный, но все таки самым правильным решением будет завернуть заголовки в "шапку" <thead>...</thead> таблицы, а все строки в "тело" <tbody>...</tbody>. Также можно добавить "подвал" таблицы обернув его в теги <tfoot>...</tfoot> примерно так

table {
  width: 80%;
  margin: 25px auto;
}

th,
td {
  padding: 7px;
}

.alt th {
  background-color: #98FB98;
}

td,
th {
  border: 2px solid #008000;
}

.col1 {
  width: 500px;
  height: 20px;
}

.col2 {
  width: 150px;
  height: 20px;
}

.col3 {
  width: 150px;
  height: 20px;
}

td {
  background-color: #E6E6FA;
}

tr:hover td { /* подсвечиваем всю строку */
/*tr td:hover { /* подсвечиваем текущий столбец строки */
  background-color: #00FFFF;
}

.first {
  border-collapse: collapse;
}
<table class="first" border="1">
<thead>
  <tr class="alt">
    <th class="col1">Наименование</th>
    <th class="col2">Ед. изм.</th>
    <th class="col3">Цена, руб.</th>
  </tr>
</thead>
<tbody>
    <tr>
      <td class="col1">Замена </td>
      <td class="col2">шт</td>
      <td class="col3">400</td>
    </tr>
    <tr>
      <td class="col1">Установка</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Установка </td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Установка</td>
      <td class="col2">шт</td>
      <td class="col3">400</td>
    </tr>
    <tr>
      <td class="col1">Замена</td>
      <td class="col2">шт</td>
      <td class="col3">600</td>
    </tr>
    <tr>
      <td class="col1">Подключение</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Подключен</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Подключение</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Прокладка</td>
      <td class="col2">м.п.</td>
      <td class="col3">70</td>
    </tr>
    <tr>
      <td class="col1">......</td>
      <td class="col2">шт</td>
      <td class="col3">500</td>
    </tr>
    <tr>
      <td class="col1">Поиск </td>
      <td class="col2">час</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Подключение</td>
      <td class="col2">шт</td>
      <td class="col3">800</td>
    </tr>
    <tr>
      <td class="col1">Поиск</td>
      <td class="col2">час</td>
      <td class="col3">800</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="alt">
      <th class="col1">Наименование</th>
      <th class="col2">Ед. изм.</th>
      <th class="col3">Цена, руб.</th>
    </tr>
  </tfoot>
</table>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.