主页 / 问题 / 1099150
Accepted
Aleks
Asked:2020-03-24 21:32:27 +0000 UTC2020-03-24 21:32:27 +0000 UTC

如何使 :hover 在表格中除表头之外的所有 tr 行的背景上工作

  • 772

这是代码：

<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 个回答

  1. Best Answer

    注意样式中的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>

    • 0

  2. 像这样的东西？

    table tr:not(:first-child):hover{
    background: #abc123;
}
    • 0

  3. 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>

    • 0

相关问题