個々のセルに色を付けずに、CSSを使用してテーブルの列に色を付けることはできますか？

121

列のスパンにずっと色を付ける方法はありますか？以下の開始例を参照してください。

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
スニペットを展開

そして、たとえば、「エンジン」と「ボディ」スパンの下にあるすべてのセルを含む、より良い方法（コードが少なく、個別のカラーリングではない）を着色する方法を探しています #DDD

<style>
  .color {
    background-color: #DDD
  }
</style>
<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
スニペットを展開

html  css 
— デニス
ソース
20
@zipzit：実際にテーブルが必要な場合、つまりデータが表形式である場合（価格付きの製品のテーブルなど）、テーブルに問題はありません。テーブルに対する批判は、それらをレイアウトツールとして使用することには反対です。
— sleske 2014
5
これがどのようにしてホットネットワークの質問に入ったのか疑問に思います
— Mr. Alien
それが昨日尋ねたと、今のように、Aに24 Q上のupvotesと43を持って、そして受け入れ答えは昔も今も狂ったようupvotedされていた
— デニス・
2
人々は、彼らが:)について知らなかった、それはjQueryの数の解析の文書化クセ、またはきちんと物事を行うHTMLタグ/コンセプトも、彼らは知らなかった事を学びたい
— デニス
1
@canon hehはい、とにかくまともな答え...
— Mr. Alien

回答:

167

はい、できます... <col>要素を使用して：

.grey {
  background-color: rgba(128,128,128,.25);
}
.red {
  background-color: rgba(255,0,0,.25);
}
.blue {
  background-color: rgba(0,0,255,.25);
}
<table>
  <colgroup>
    <col class="grey" />
    <col class="red" span="3" />
    <col class="blue" />
  </colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th colspan="3">color 1</th>
      <th>color 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>
      <td>blue</td>
    </tr>
    <tr>
      <th>2</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>      
      <td>blue</td>
    </tr>
  </tbody>
</table>
スニペットを展開

注：このspan属性を使用して、col定義を複数の列に適用できます。
また見なさい：<colgroup>

— キヤノン
ソース
10
<col span="3" />スパンする列が必要になることに注意してください。
— Niet the Dark Absol
colgroupすべての列を含むを使用しても、あまり意味がありません。
— Jukka K. Korpela、2014
14
@ JukkaK.Korpela指定したかどうかに関係なく、そのように解析されます<tbody>。私は単に指定することを好みます。
— 2014
colタグの使用はそれほど一般的ではないようですが、私は常に列幅に使用しています
— Koen。
3
他の誰かがこれが機能する理由、または列で使用できるCSSプロパティに興味がある場合、CSS 2.1仕様の関連セクションは17.3および17.5.1です。
— メリトン2014
18

nth-childそのためにセレクターを使用できます。

tr td:nth-child(2),
tr td:nth-child(3) {
  background: #ccc;
}
<table>
  <tr>
    <th colspan="2">headline 1</th>
    <th>headline 2</th>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
</table>
スニペットを展開

— マーカス・コトレンダー
ソース
1
スタイリングcol自体はこれよりもはるかに優れています（よりクリーンで高速）。
— tomasz86
9

セルのスタイル設定（必要に応じて列ごと）が最も簡単ですが、列のスタイル設定はさまざまな方法で行うことができます。簡単な方法の1つは、colgroup要素の列をラップして、それにスタイルを設定することです。例：

<style>
.x {
    background-color: #DDD
}
</style>
<table border="1">
<col>
<colgroup class=x>
  <col>
  <col>
  <col>
</colgroup>
<col>
<colgroup class=x>
  <col>
  <col>
</colgroup>
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
スニペットを展開

— ユッカ・K・コルペラ
ソース
1
個々の場合はcol内部の要素colgroupsが個別にスタイルする必要はありません、あなたも設定できるspanの属性colgroup-自身<colgroup span="2">- の代わりに配置するcolこと内部の要素を。
— misterManSam 2014
5

CSS3を使用できます：http : //jsfiddle.net/snuggles08/bm98g8v8/

<style>
  .table td:nth-of-type(1) {
    background: red;
  }
  .table td:nth-of-type(5) {
    background: blue;
  }
  .table td:nth-of-type(3) {
    background: green;
  }
  .table td:nth-of-type(7) {
    background: lime;
  }
  .table td:nth-of-type(2) {
    background: skyblue;
  }
  .table td:nth-of-type(4) {
    background: darkred;
  }
  .table td:nth-of-type(6) {
    background: navy;
  }
</style>
Styled table:
<table border="1" class="table">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
<hr>Unstyled table:
<table border="1" class="table2">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
スニペットを展開

— leo60228
ソース
5

これにはnth-childcss疑似クラスを使用します。

tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){
    background-color: #DDD;
}

コードスニペットを表示

— ハワード・レノレット
ソース
5

次の実装はn番目の子セレクターであり、機能するはずです...

<style type="text/css">
    th:nth-child(2),
    th:nth-child(4)
    {
        background-color: rgba(255, 0, 0, 1.0);
    }

    td:nth-child(2), 
    td:nth-child(3),
    td:nth-child(4),
    td:nth-child(6),
    td:nth-child(7)
    {
        background-color: rgba(255, 0, 0, 0.5);
    }
</style>
— 食べて睡眠コード
ソース
あなたはおそらくしたい>あなただけのテーブルだけ内部TRS内のTDSを選択するトラブルに行ってきましたので、（tablegroupsを気に。）...、TRとTDの間
— ANeves
答えてくれてありがとう、これは別の解決策です
— Mohammad Kermani
これはやりすぎです。過剰に指定するとパフォーマンスが低下します。table tr tdはtd常にとの中にあるためtr、冗長tableです。
— tomasz86
4

n番目の子の式を使用した私のバージョン：

カスケードルールのCSSコンセプトを使用して、最初にセルに色を付け、次に透明にしたいセルの色を解除します。最初のセレクターは最初のセルの後にあるすべてのセルを選択し、2番目のセレクターは5番目のセルを選択して透明にします。

<style type="text/css">
  /* colored */
  td:nth-child(n+2) { background-color: #ddd }
  /* uncolored */
  td:nth-child(5) { background-color: transparent }
</style>

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
スニペットを展開

この興味深い参照を確認してください：http : //learn.shayhowe.com/advanced-html-css/complex-selectors/

— マークス
ソース
1

これは古い質問で、多くの素晴らしい答えがあります。まだ言及されていない-nおよびnth-last-childセレクターを追加したかっただけです。CSSを複数の列に適用する場合に役立ちますが、スタイル設定前の列数がわからない場合や、幅が異なる複数のテーブルがある場合があります。

/* Select the first two */
table tr td:nth-child(-n + 2) {
  background-color: lightblue;
}

/* Select all but the first two */
table tr td:not(:nth-child(-n + 2)) {
    background-color:lightgreen;
}

/* Select last two only */
table tr td:nth-last-child(-n + 2) {
  background-color:mistyrose;
}

/* Select all but the last two */
table tr td:not(:nth-last-child(-n + 2)) {
    background-color:yellow;
}

jsFiddle：https ://jsfiddle.net/3rpf5oht/2/

— elPastor
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.