twitter-bootstrap 使用 CSS 和 Bootstrap 3 来突出显示当前悬停在 html 表上的行和列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22193534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS and Bootstrap 3 in order to highlight the currently hovered-on row and column of a html table
提问by balteo
I would like to be able to use Bootstrap 3or/and plain cssin order to highlight the currently hovered-on row and column of a html table.
我希望能够使用Bootstrap 3或/和普通 css来突出显示当前悬停在 html table 的行和列。
Is this possible without using custom javascript and keeping the responsivenessof Bootstrap tables?
如果不使用自定义 javascript 并保持Bootstrap 表的响应能力，这可能吗？
Can anyone please provide advice and/or links?
任何人都可以提供建议和/或链接吗？
回答by Mo.
Add .table-hoverto enable a hover state on table rows
添加.table-hover以在表格行上启用悬停状态
<table class="table table-hover">
...
</table
Create a parent div with class .table-responsiveto responsiveness
创建一个具有.table-responsive响应性类的父 div
<div class="table-responsive">
<table class="table table-hover">
...
</table>
</div>
UPDATE
更新
Solution with :nth-child()to identify :hovercolumn number
用:nth-child()识别:hover列号的解决方案
demohttp://jsfiddle.net/kGz9E/
Reference: http://getbootstrap.com/css/#tables
回答by Kai
*** bootstrap-3.3.7 ***
You are using *bootstrap.min.css* or *bootstrap.css*.
1.Open *bootstrap.min.css* or *bootstrap.css*
that you include with *link tag* in your html file.
2.Find the code below in *bootstrap.min.css* or *bootstrap.css*
whose class name is *table-hover*.
.table-hover > tbody > tr:hover {
background-color: #f5f5f5;
}
table col[class*="col-"] {
position: static;
display: table-column;
float: none;
}
3.Paste the new code below after the above code
whose class name is *table-hoverCell*.
.table-hoverCell > tbody > tr > td:hover {
background-color: #f5f5f5;
}
table col[class*="col-"] {
position: static;
display: table-column;
float: none;
}
4.The final appearance is like this
.table-hover > tbody > tr:hover {
background-color: #f5f5f5;
}
table col[class*="col-"] {
position: static;
display: table-column;
float: none;
}
.table-hoverCell > tbody > tr > td:hover {
background-color: #f5f5f5;
}
table col[class*="col-"] {
position: static;
display: table-column;
float: none;
}
*** I use *bootstrap.css* for this explanation
so final appearance is different from *bootstrap.min.css*.
The code in *bootstrap.min.css* is written without any linebreaks
so you can easily do find and paste using *bootstrap.css*. ***
