如何使用 Bootstrap 突出显示 HTML 表格列

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 Currentcolumns with one color background and the Newcolumns to have another.

例如，在下表中，我希望Current列具有一种颜色背景，而New列具有另一种颜色。

http://jsfiddle.net/75v7W/

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

UPDATE: I have achieved something of what I am looking for using colgroupand, 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 colgroupand, alas, custom CSS (though not very much): http://jsfiddle.net/75v7W/4/

我实现了一些我正在寻找的东西colgroup，唉，自定义 CSS（虽然不是很多）：http: //jsfiddle.net/75v7W/4/

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.

注意：对于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 类。