如何使用Bootstrap突出显示HTML表列 [英] How do I highlight an HTML table column with Bootstrap

问题描述

我使用引导并创建了一个表，其中我需要列分组在一起。有没有我可以使用的任何引导选项？我愿意写我自己的CSS来做，但我宁愿不是如果有一个内置的引导方式来做到这一点。

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.

例如，在下面的表格中，我想要一个颜色背景的当前列， $ c>新列。

For example, in the table below I would want the Current columns with one color background and the New columns to have another.

http： //jsfiddle.net/75v7W/

<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>Jack</td>
            <td>Bauer</td>
        </tr>
    </tbody>
</table>

UPDATE ：我已经实现了我正在寻找的东西 colgroup 和，alas，自定义CSS（虽然不是很多）： http：// jsfiddle .net / 75v7W / 4 /

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 /

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/

注意：对于下面的 background-color 成功，错误等从 bootstrap.css 中的默认颜色。如果您已经自定义了bootstrap.css，这些特定的颜色可能不适合您。

Note: For the background-colors 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.

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>Jack</td>
            <td>Bauer</td>
        </tr>
    </tbody>
</table>

这篇关于如何使用Bootstrap突出显示HTML表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！