Question

当悬停在一行上时，我希望在使用rowspans时突出显示html表中的行。我希望仅使用最少或没有JavaScript的CSS即可实现。现在，“表格”行被突出显示，但是当具有“子”行时，它仅突出显示该行，而不是在视觉上是该行的“一部分”。

table {
  width: 100%;
}

.topLevelRow td {
  border-top:double 3px silver;
}

td {
  border-top:solid 1px silver;
}

tr:hover {
  background-color:lightgray;
}

<html>
  <head></head>
  <body>
    <table>
      <tr class="topLevelRow">
        <td rowspan="3">1</td>
        <td rowspan="3">Text 1</td>
        <td>Sub A 1</td>
        <td>Sub B 1</td>
      </tr>
      <tr><td>Sub A 2</td><td>Sub B 2</td></tr>
      <tr><td>Sub A 3</td><td>Sub B 3</td></tr>
      <!-- . -->
      <tr class="topLevelRow">
        <td rowspan="5">2</td>
        <td rowspan="5">Text 2</td>
        <td>Sub A 1</td>
        <td rowspan="1">Sub B 1</td>
      </tr>
      <tr><td rowspan="1">Sub A 2</td><td rowspan="1">Sub B 2</td></tr>
      <tr><td rowspan="1">Sub A 3</td><td rowspan="1">Sub B 3</td></tr>
      <tr><td rowspan="1">Sub A 4</td><td rowspan="1">Sub B 4</td></tr>
      <tr><td rowspan="1">Sub A 5</td><td rowspan="1">Sub B 5</td></tr>
      
    </table>
  </body>
</html>

如您所见，它仅突出显示部分行。如何突出显示所有内容？

Answer 1

您可以使用多个<tbody>元素来定义表格上的区域。在这种情况下，您有一个<table>元素，其中包含一些行组。在<tbody>元素中使用多个<table>元素也是有效的HTML5。

table {
  width: 100%;
}

td {
  border-top: 1px solid silver;
}

tbody tr:nth-child(1) td {
  border-top: 3px double silver;
}

tbody:hover tr {
  background-color: lightgray;
}

<html>
  <head></head>
  <body>
    <table>
      <tbody>
        <tr>
          <td rowspan="3">1</td>
          <td rowspan="3">Text 1</td>
          <td>Sub A 1</td>
          <td>Sub B 1</td>
        </tr>
        <tr><td>Sub A 2</td><td>Sub B 2</td></tr>
        <tr><td>Sub A 3</td><td>Sub B 3</td></tr>
      </tbody>
      <tbody>
        <tr>
          <td rowspan="5">2</td>
          <td rowspan="5">Text 2</td>
          <td>Sub A 1</td>
          <td>Sub B 1</td>
        </tr>
        <tr><td>Sub A 2</td><td>Sub B 2</td></tr>
        <tr><td>Sub A 3</td><td>Sub B 3</td></tr>
        <tr><td>Sub A 4</td><td>Sub B 4</td></tr>
        <tr><td>Sub A 5</td><td>Sub B 5</td></tr>
      </tbody>
    </table>
  </body>
</html>

Answer 2

最简单的方法是在每个块之后断开表。这是最简单的方法，但这取决于您的模板引擎（或您使用的是什么）是否允许这样做。

table {
  width: 100%;
}

table:hover {
  background-color:lightgray;
}

.topLevelRow td {
  border-top:double 3px silver;
}

td {
  border-top:solid 1px silver;
}

<html>
  <head></head>
  <body>
    <table>
      <tr class="topLevelRow">
        <td rowspan="3">1</td>
        <td rowspan="3">Text 1</td>
        <td>Sub A 1</td>
        <td>Sub B 1</td>
      </tr>
      <tr><td>Sub A 2</td><td>Sub B 2</td></tr>
      <tr><td>Sub A 3</td><td>Sub B 3</td></tr>
    </table>
    <!-- Break table here and start new one -->
    <table>
      <tr class="topLevelRow">
        <td rowspan="5">2</td>
        <td rowspan="5">Text 2</td>
        <td>Sub A 1</td>
        <td rowspan="1">Sub B 1</td>
      </tr>
      <tr><td rowspan="1">Sub A 2</td><td rowspan="1">Sub B 2</td></tr>
      <tr><td rowspan="1">Sub A 3</td><td rowspan="1">Sub B 3</td></tr>
      <tr><td rowspan="1">Sub A 4</td><td rowspan="1">Sub B 4</td></tr>
      <tr><td rowspan="1">Sub A 5</td><td rowspan="1">Sub B 5</td></tr>
    </table>
  </body>
</html>

用行跨高亮显示行

2 个答案: