CSS 在 Bootstrap 中为单元格使用表格行着色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16763818/
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
Use table row coloring for cells in Bootstrap
提问by Mahoni
Twitter Bootstrapoffers classes to color table rowslike so:
Twitter Bootstrap提供了为表格行着色的类，如下所示：
<tr class="success">
I like the color choice and the class naming. Now what I would like to do, is to re-use these classes and apply them on table cells, too. Obviously, I could define my own classes with the same colors and be done with it.
我喜欢颜色选择和类命名。现在我想做的是重用这些类并将它们也应用于表格单元格。显然，我可以用相同的颜色定义我自己的类并完成它。
But is there a shorthand in CSS. LESS, to let the tdinherit the classes?
但是在 CSS 中有简写吗？LESS，让td继承类？
回答by Matt
You can override the default css rules with this:
您可以使用以下方法覆盖默认的 css 规则：
.table tbody tr > td.success {
background-color: #dff0d8 !important;
}
.table tbody tr > td.error {
background-color: #f2dede !important;
}
.table tbody tr > td.warning {
background-color: #fcf8e3 !important;
}
.table tbody tr > td.info {
background-color: #d9edf7 !important;
}
.table-hover tbody tr:hover > td.success {
background-color: #d0e9c6 !important;
}
.table-hover tbody tr:hover > td.error {
background-color: #ebcccc !important;
}
.table-hover tbody tr:hover > td.warning {
background-color: #faf2cc !important;
}
.table-hover tbody tr:hover > td.info {
background-color: #c4e3f3 !important;
}
!importantis needed as bootstrap actually colours the cells individually (afaik it's not possible to just apply background-color to a tr). I couldn't find any colour variables in my version of bootstrap but that's the basic idea anyway.
!important是需要的，因为引导程序实际上对单元格单独着色（afaik 不可能只将背景颜色应用于 tr）。我在我的引导程序版本中找不到任何颜色变量，但无论如何这是基本思想。
回答by mathieugagne
Bottom line is that you'll have to write a new css rule for that.
最重要的是，您必须为此编写新的 css 规则。
Depending on which bundle of Twitter Bootstrap you're using, you should have variables for the various colours.
根据您使用的 Twitter Bootstrap 包，您应该拥有各种颜色的变量。
Try something like:
尝试类似：
.table tbody tr > td {
&.success { background-color: $green; }
&.info { background-color: $blue; }
...
}
Surely there's a way to use extendor the LESS equivalent to avoid repeating the same styling.
当然有一种方法可以使用extend或 LESS 等价物来避免重复相同的样式。
回答by user666
With the current version of Bootstrap (3.3.7), it is possible to color a single cell of a table like so:
使用当前版本的 Bootstrap (3.3.7)，可以像这样为表格的单个单元格着色：
<td class = 'text-center col-md-4 success'>
<td class = 'text-center col-md-4 success'>
回答by Mastro
Updated html for the newer bootstrap
为较新的引导程序更新了 html
.table-hover > tbody > tr.danger:hover > td {
background-color: red !important;
}
.table-hover > tbody > tr.warning:hover > td {
background-color: yellow !important;
}
.table-hover > tbody > tr.success:hover > td {
background-color: blue !important;
}
回答by Omer
With less you can set it up like this;
用 less 你可以这样设置；
.table tbody tr {
&.error > td { background-color: red !important; }
&.error:hover > td { background-color: yellow !important; }
&.success > td { background-color: green !important; }
&.success:hover > td { background-color: yellow !important; }
...
}
That did the trick for me.
那对我有用。
