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

Question

我正在使用bootstrap并创建了一个表，我需要将列组合在一起。我可以使用任何引导选项吗？我愿意编写自己的CSS来做这件事，但如果有内置的bootstrap方法，我宁愿不这样做。

例如，在下表中，我希望Current列有一个彩色背景，New列有另一个。

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>

更新：我已经使用colgroup取得了我正在寻找的东西，唉，自定义CSS（虽然不是很多）：http://jsfiddle.net/75v7W/4/

Answer 1

我使用colgroup实现了我想要的东西，唉，自定义CSS（虽然不是很多）：http://jsfiddle.net/75v7W/4/

注意：对于下面的background-color，我从bootstrap.css的默认颜色中取消了成功，错误等。如果您已自定义bootstrap.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 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>

Answer 2

如果可以使用bootstrap内置css类，那就更好了。

有一种内置方法可以高亮显示列：https://jsfiddle.net/DanielKis/wp6bt229/

<强> 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>

您可以使用

• bg-primary
• bg-success
• bg-info
• bg-warning
• bg-danger

用于为列，单元格等着色的Css类