30

私はブートストラップを使用しており、グループ化された列が必要なテーブルを作成しました。使用できるブートストラップ オプションはありますか? 私はそれを行うために独自の CSS を書きたいと思っていますが、それを行うための組み込みのブートストラップ方法がある場合は、むしろそうしたくありません。

たとえば、下の表では、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/

4

2 に答える 2

27

残念ながら、カスタムCSSを使用して探しているものの何かを達成しましたcolgroup（あまり多くはありませんが）：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>
于 2013-06-13T16:58:40.523 に答える
14

可能であれば、ブートストラップの組み込み 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 クラス。

于 2016-11-07T20:49:42.947 に答える