jquery - Twitter Bootstrap データテーブルの列に異なる背景を設定するにはどうすればよいですか?

Question

Twitter Bootstrap データテーブルを使用しています。それらのスタイリングに関するドキュメントを入手するのは難しいと思います。30 列あり、一部の列には編集可能なデータがあり、一部のフィールドは編集できません。編集可能なすべてのフィールドの背景を強調表示/変更する必要があります (これは約 20 列になり、すべてが隣り合っているわけではありません)。

これが可能かどうか誰にもわかりますか？ブートストラップにはかなり厳密な設計があることは知っていますが、あまり詳しくありません。

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>