html – 使用rowspan突出显示行_html-js-css

概述我希望在悬停在一行上时使用行扫描来突出显示html表中的行.我更喜欢用CSS实现,只需要很少或没有 javascript. 现在Table行被突出显示,但是当有一个’sub’行时,它只突出显示那个而不是行,它在视觉上是’part’. table { width: 100%;}.topLevelRow td { border-top:double 3px silver;}td { 我希望在悬停在一行上时使用行扫描来突出显示HTML表中的行.我更喜欢用CSS实现,只需要很少或没有 javascript.
现在table行被突出显示,但是当有一个’sub’行时,它只突出显示那个而不是行,它在视觉上是’part’.

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

如您所见,它只突出显示部分行.我怎样才能突出所有这些？

解决方法您可以使用多个< 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>

总结

以上是内存溢出为你收集整理的html – 使用rowspan突出显示行全部内容，希望文章能够帮你解决html – 使用rowspan突出显示行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1071340.html