如何使用 Bootstrap 突出显示 HTML 表格列
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16967366/
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
How do I highlight an HTML table column with Bootstrap
提问by wilsjd
I am using bootstrap and have created a table in which I need columns grouped together. Is there any bootstrap options that I can use? I am willing to write my own CSS to do it, but I would rather not if there is a built in bootstrap way to do it.
我正在使用引导程序并创建了一个表,我需要在其中将列组合在一起。我可以使用任何引导程序选项吗?我愿意编写我自己的 CSS 来做到这一点,但如果有内置的引导程序方式来做到这一点,我宁愿不这样做。
For example, in the table below I would want the Current
columns with one color background and the New
columns to have another.
例如,在下表中,我希望Current
列具有一种颜色背景,而New
列具有另一种颜色。
<table>
<thead>
<tr>
<td></td>
<td colspan="2" style="text-align: center;">Current</td>
<td colspan="2" style="text-align: center;">New</td>
</tr>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Fisrt Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Bauer</td>
<td>Hyman</td>
<td>Bauer</td>
</tr>
</tbody>
</table>
UPDATE: I have achieved something of what I am looking for using colgroup
and, alas, custom CSS (though not very much) : http://jsfiddle.net/75v7W/4/
更新:我已经实现了一些我正在寻找的东西colgroup
,唉,自定义 CSS(虽然不是很多):http: //jsfiddle.net/75v7W/4/
采纳答案by wilsjd
I achieved something of what I am looking for using colgroup
and, alas, custom CSS (though not very much): http://jsfiddle.net/75v7W/4/
我实现了一些我正在寻找的东西colgroup
,唉,自定义 CSS(虽然不是很多):http: //jsfiddle.net/75v7W/4/
Note: For the background-color
s below, I pulled from the success, error, etc. from the default colors in the bootstrap.css
. If you have customized your bootstrap.css, these specific colors may not work for you.
注意:对于background-color
下面的s,我从bootstrap.css
. 如果您自定义了 bootstrap.css,这些特定颜色可能不适合您。
CSS
CSS
colgroup col.success {
background-color: #dff0d8;
}
colgroup col.error {
background-color: #f2dede;
}
colgroup col.warning {
background-color: #fcf8e3;
}
colgroup col.info {
background-color: #d9edf7;
}
TABLE
桌子
<table class="table table-condensed">
<colgroup>
<col>
<col span="2" class="info">
<col span="2" class="success">
</colgroup>
<thead>
<tr>
<td></td>
<td colspan="2" style="text-align: center;">Current</td>
<td colspan="2" style="text-align: center;">New</td>
</tr>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Fisrt Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Bauer</td>
<td>Hyman</td>
<td>Bauer</td>
</tr>
</tbody>
</table>
回答by Dániel Kis
It is better, if it is possible use the bootstrap build-in css classes.
如果可能的话,最好使用 bootstrap 内置的 css 类。
There is a built in way to hightlight a columns: https://jsfiddle.net/DanielKis/wp6bt229/
有一种内置的方式来突出显示列:https: //jsfiddle.net/DanielKis/wp6bt229/
HTML:
HTML:
<table class="table table-condensed">
<colgroup>
<col class="bg-success"></col>
<col span="2" class="bg-info"></col>
<col span="2" class="bg-danger"></col>
</colgroup>
<thead>
<tr>
<td></td>
<td colspan="2" class="text-center bg-primary">Current</td>
<td colspan="2" class="text-center">New</td>
</tr>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Fisrt Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Johnny</td>
<td>English</td>
<td>Bud</td>
<td>Spencer</td>
</tr>
</tbody>
</table>
You can use
您可以使用
bg-primary
bg-success
bg-info
bg-warning
bg-danger
bg-primary
bg-success
bg-info
bg-warning
bg-danger
Css classes to colorize your columns, cells, etc.
用于为列、单元格等着色的 CSS 类。