悬停在表格上时如何突出显示表格的行和列？
Posted
技术标签:
【中文标题】悬停在表格上时如何突出显示表格的行和列？【英文标题】：How to highlight a table's row and column when hovering over it? 【发布时间】：2019-06-09 18:10:44 【问题描述】：我想做与此示例完全相同的操作：http://jsfiddle.net/ThinkingStiff/rUhCa/。
但是，当我尝试更改表格的背景颜色时，悬停和突出显示停止工作。
下面你可以看到我的代码：
HTML
<table>
<tr>
<th></th>
<th class="col">50kg</th>
<th class="col">55kg</th>
<th class="col">60kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td>
<td>21</td>
<td>23</td>
</tr>
</table>
CSS
table
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
td, th, .row, .col
cursor: pointer;
padding: 10px;
position: relative;
td:hover::before,
.row:hover::before
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
td:hover::after,
.col:hover::after
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
【问题讨论】：
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/demo doesn't work can I just paste a link。 非常感谢您的反馈。我希望我添加的代码有所帮助。 【参考方案1】：假设这是您正在寻找的东西。当table 具有背景颜色时，您设置z-index: -1 将隐藏背景荧光笔，因为它的z-index 值高于负值。但你真的根本不需要它们。您应该使用 RGBA 颜色 - 它指定颜色的不透明度以进行突出显示。希望对您有所帮助！
table
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
background-color: tomato;
td, th
padding: 10px;
position: relative;
tr:hover
background-color: rgba(255, 255, 0, 0.5);
td:hover::after,th:hover::after
background-color: rgba(255, 255, 0, 0.5);
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
<table>
<tr>
<th></th>
<th>50kg</th>
<th>55kg</th>
<th>60kg</th>
<th>65kg</th>
<th>70kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>26</td>
</tr>
<tr>
<th class="row">170cm</th>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
</tr>
<tr>
<th class="row">175cm</th>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
</tr>
</table>
<script>
/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
var headerUri = 'http://***.com/q/848840/918414',
headerCaption = 'cols, colgroups and css :hover psuedoclass';
document.body.insertAdjacenthtml(
'afterBegin',
'<a href="' + headerUri + '" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'color: white;'
+ 'display: block;'
+ 'font: normal 15px/26px Helvetica, Verdana, Tahoma;'
+ 'height: 26px;'
+ 'left: 0px;'
+ 'opacity: 1;'
+ 'overflow: hidden;'
+ 'padding: 2px 8px;'
+ 'position: fixed;'
+ 'right: 0px;'
+ 'text-decoration: none;'
+ 'text-overflow: ellipsis;'
+ 'text-shadow: -1px -1px black;'
+ 'top: 0px;'
+ 'white-space: nowrap;'
+ 'z-index: 9999;'
+ '"><img '
+ 'style="'
+ 'display: block;'
+ 'float: left;'
+ 'margin-right: 8px;" '
+ 'src="http://thinkingstiff.com/images/***.png" />'
+ headerCaption
+ '</a>'
);
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="http://thinkingstiff.com" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'bottom: 0;'
+ 'color: white;'
+ 'display: block;'
+ 'font-family: Helvetica, Verdana, Tahoma;'
+ 'opacity: 1;'
+ 'padding: 4px 8px;'
+ 'position: fixed;'
+ 'right: 0;'
+ 'text-decoration: none;'
+ 'text-shadow: -1px -1px black;'
+ 'z-index: 999;'
+ '">thinkingstiff.com</a>'
);
document.head.insertAdjacentHTML( 'beforeEnd',
'<style>'
+ 'body margin-top: 40px !important; '
+ '</style>'
);
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23915674-6']);
_gaq.push(['_trackPageview']);
(function()
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
)();
</script>【讨论】：
非常感谢！这正是我所需要的！ 所以，我遇到了另一个问题。如果我将鼠标悬停在任何值上并尝试将鼠标悬停在其左侧的任何值上，则突出显示不会更新，它会停留在先前突出显示的值上。你能帮忙吗？ 再次感谢K.C！！ 而不是使用任意大的 px 值 - 使用200vh 和 -100vh 可以解决问题，并且即使屏幕分辨率超过此答案中的过高值也可以工作。此外，如果您的表是交互式的，您可能需要pointer-events: none【参考方案2】：
您可以通过添加伪元素和修改附加代码来解决。
table
width:100%;
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
td, th
cursor: pointer;
padding: 10px;
position: relative;
td:hover::before
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
td:hover::after
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
tr:nth-child(odd)
background-color: rgba(1, 1, 0, 0.2);
tr:nth-child(even)
background-color: rgba(200, 1, 200, 0.2);
<table>
<tr>
<th></th>
<th>50kg</th>
<th>55kg</th>
<th>60kg</th>
<th>65kg</th>
<th>70kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>26</td>
</tr>
<tr>
<th class="row">170cm</th>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
</tr>
<tr>
<th class="row">175cm</th>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
</tr>
</table>
<script>
/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
var headerUri = 'http://***.com/q/848840/918414',
headerCaption = 'cols, colgroups and css :hover psuedoclass';
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="' + headerUri + '" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'color: white;'
+ 'display: block;'
+ 'font: normal 15px/26px Helvetica, Verdana, Tahoma;'
+ 'height: 26px;'
+ 'left: 0px;'
+ 'opacity: 1;'
+ 'overflow: hidden;'
+ 'padding: 2px 8px;'
+ 'position: fixed;'
+ 'right: 0px;'
+ 'text-decoration: none;'
+ 'text-overflow: ellipsis;'
+ 'text-shadow: -1px -1px black;'
+ 'top: 0px;'
+ 'white-space: nowrap;'
+ 'z-index: 9999;'
+ '"><img '
+ 'style="'
+ 'display: block;'
+ 'float: left;'
+ 'margin-right: 8px;" '
+ 'src="http://thinkingstiff.com/images/***.png" />'
+ headerCaption
+ '</a>'
);
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="http://thinkingstiff.com" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'bottom: 0;'
+ 'color: white;'
+ 'display: block;'
+ 'font-family: Helvetica, Verdana, Tahoma;'
+ 'opacity: 1;'
+ 'padding: 4px 8px;'
+ 'position: fixed;'
+ 'right: 0;'
+ 'text-decoration: none;'
+ 'text-shadow: -1px -1px black;'
+ 'z-index: 999;'
+ '">thinkingstiff.com</a>'
);
document.head.insertAdjacentHTML( 'beforeEnd',
'<style>'
+ 'body margin-top: 40px !important; '
+ '</style>'
);
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23915674-6']);
_gaq.push(['_trackPageview']);
(function()
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
)();
</script>【讨论】：
以上是关于悬停在表格上时如何突出显示表格的行和列？的主要内容，如果未能解决你的问题，请参考以下文章
我们如何在 ext js 4.2 中突出显示网格面板的行和列？
选择 QTableWidget 中的行和列，同时保持突出显示