jquery - 如何为 Twitter Bootstrap 数据表中的列设置不同的背景？

Question

我正在使用 Twitter Bootstrap 数据表。我发现很难获得有关样式化它们的文档。我有30列，有些列有数据可以编辑，有些字段不能编辑。我需要突出显示/更改所有可编辑字段的背景(大约有 20 列，而不是全部相邻)。

有人知道这是否可行吗？我知道 bootstrap 有一些非常严格的设计，但我不是很熟悉。

Answer 1

您可以使用 colgroup 结构:- 为表格中的每一列创建一个 col 元素- 现在您可以为可编辑列设置类或内联样式

<table class="table">
<colgroup>
<col style="background-color: red;">
<col class="editable">
<col>
<col class="editable">
</colgroup>
        <thead>
          <tr>
            <th>#</th>
            <th>Column heading</th>
            <th>Column heading</th>
            <th>Column heading</th>
          </tr>
        </thead>
        <tbody>

          <tr>
            <td>1</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>7</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
        </tbody>
      </table>