时间戳

首页 > 解决方案 > 如何使用 CSS 正确悬停 rowSpan 单元格

html - 如何使用 CSS 正确悬停 rowSpan 单元格

问题描述

考虑以下具有跨行行的简单表：

.grid {
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid black;
}

.headerrow {
  border: 1px solid black;
  width: 100px;
  border: 1px solid black;
}

.row {
  border: 1px solid black;
  width: 100px;
  border: 1px solid black;
}

.cell {
  padding: 10px;
  border: 1px solid black;
  text-align: center;
}

.row:hover {
  background-color: grey;
  color: white;
}
<table class="grid">
  <thead>
    <tr class="headerrow">
      <th class="cell"><input type="checkbox"></th>
      <td class="cell">
        Column 1
        </div>
      </td>
      <td class="cell">
        Column 2
        </div>
      </td>
      <td class="cell">
        Column 3
        </div>
      </td>
      <td class="cell">
        Column 4
        </div>
      </td>
      <td class="cell">
        Column 5
        </div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr class="row">
      <td class="cell" rowspan="2"><input type="checkbox"></td>
      <td rowspan="2" class="cell">
        0
      </td>
      <td class="cell">
        0
      </td>
      <td rowspan="2" class="cell">
        0
      </td>
      <td class="cell">
        0
      </td>
      <td class="cell">
        0
      </td>
    </tr>
    <tr class="row">
      <td class="cell">
        2
      </td>
      <td class="cell">
        4
      </td>
      <td class="cell">
        5
      </td>
    </tr>
    <tr class="row">
      <td class="cell"><input type="checkbox"></td>
      <td rowspan="1" class="cell">
        2
      </td>
      <td class="cell">
        4
      </td>
      <td rowspan="1" class="cell">
        6
      </td>
      <td class="cell">
        8
      </td>
      <td class="cell">
        10
      </td>
    </tr>
  </tbody>
</table>

使用纯 CSS，如何调整悬停行为以在两行（具有 rowSpan 的行和下一行）上发生，如下所示：

在此处输入图像描述

标签： htmlcss

解决方案

不能，因为不一样<td>

一种选择是将其分组<tbody>

.grid {
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid black;
}

.headerrow {
  border: 1px solid black;
  width: 100px;
  border: 1px solid black;
}

.row {
  border: 1px solid black;
  width: 100px;
  border: 1px solid black;
}

.cell {
  padding: 10px;
  border: 1px solid black;
  text-align: center;
}

tbody:hover {
  background-color: grey;
  color: white;
}
<table class="grid">
  <thead>
    <tr class="headerrow">
      <th class="cell"><input type="checkbox"></th>
      <td class="cell">
        Column 1
        </div>
      </td>
      <td class="cell">
        Column 2
        </div>
      </td>
      <td class="cell">
        Column 3
        </div>
      </td>
      <td class="cell">
        Column 4
        </div>
      </td>
      <td class="cell">
        Column 5
        </div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr class="row">
      <td class="cell" rowspan="2"><input type="checkbox"></td>
      <td rowspan="2" class="cell">
        0
      </td>
      <td class="cell">
        0
      </td>
      <td rowspan="2" class="cell">
        0
      </td>
      <td class="cell">
        0
      </td>
      <td class="cell">
        0
      </td>
    </tr>
    <tr class="row">
      <td class="cell">
        2
      </td>
      <td class="cell">
        4
      </td>
      <td class="cell">
        5
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr class="row">
      <td class="cell"><input type="checkbox"></td>
      <td rowspan="1" class="cell">
        2
      </td>
      <td class="cell">
        4
      </td>
      <td rowspan="1" class="cell">
        6
      </td>
      <td class="cell">
        8
      </td>
      <td class="cell">
        10
      </td>
    </tr>
  </tbody>
</table>

推荐阅读