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>

如何在Twitter Bootstrap数据表中为列提供不同的背景？

1 个答案: