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>
스 니펫 확장

예를 들어 "Engine"및 "Body"범위 (아래에있는 모든 셀 포함)에 색상을 지정하는 더 좋은 방법 (코드가 적고 개별 색상이 아님)을 찾고 있습니다. #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
5
원더 어떻게 입력 핫 네트워크 질문
— 씨 외국인
어제 질문을 받았으며 지금 현재 Q에 24 개, A에 43 개가 있습니다. 수락 된 답변은 여전히 ​​미친 듯이 upvoted입니다
— Dennis
2
사람들은 자신이 몰랐던 것을 배우고 싶어합니다. 문서화 된 jQuery 번호 파싱의 특성이든, 깔끔한 작업을 수행하는 HTML 태그 / 개념이든, 그들은 몰랐습니다. :)
— Dennis
1
예 ㅎ @canon, 어쨌든 괜찮은 답변을 ...
— 씨 외국인

답변:

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속성을 사용하여 열 정의를 둘 이상의 열에 적용 할 수 있습니다.
참조 :<colgroup>

— 정경
소스
10
<col span="3" />스패닝 열 이 필요 합니다.
— Niet the Dark Absol
colgroup모든 열을 포함 하는를 사용하는 것은 의미가 없습니다.
— Jukka K. Korpela 2014
14
@ JukkaK.Korpela 지정 여부에 관계없이 그런 식으로 구문 분석 <tbody>됩니다. 나는 단순히 지정하는 것을 선호합니다.
— canon
나는를 사용하는 것을 볼 col태그가 일반적이지,하지만 난 열 너비 항상 사용
— 공원을.
3
다른 사람이 이것이 왜 작동하는지 궁금하거나 열에 사용할 수있는 CSS 속성을 궁금해하는 경우 CSS 2.1 사양의 관련 섹션은 17.3 및 17.5.1 입니다.
— meriton 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>
스 니펫 확장

— Markus Kottländer
소스
1
스타일 col자체가 이것보다 훨씬 낫습니다 (더 깨끗하고 빠릅니다).
— tomasz86
9

일반적으로 셀 스타일을 지정하는 것이 가장 간단하지만 (원하는 경우 열별로) 열에 다른 방식으로 스타일을 지정할 수 있습니다. 한 가지 간단한 방법은 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내부 요소 colgroup의 개별적 스타일을 지정할 필요가 없습니다, 당신은 또한 설정할 수 있습니다 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>
— 먹는 수면 코드
소스
당신은 아마도 >tr과 td 사이를 원할 것입니다. 테이블 안에서만 trs 안에서만 tds를 선택하는 문제에 갔기 때문입니다 ... (테이블 그룹에 유의하십시오.)
— ANeves
답변에 대한 감사합니다,이 서로 다른 솔루션입니다
— 모하마드 Kermani
이것은 과잉입니다. 과도하게 지정하면 성능에 좋지 않습니다. table tr td로 중복 td의 항상 내부에 tr와 table.
— tomasz86
4

n 번째 자식 식을 사용하는 내 버전 :

캐스케이드 규칙의 CSS 개념을 사용하여 먼저 셀을 채색 한 다음 투명하게 만들고 싶은 셀의 색상을 해제합니다. 첫 번째 선택기는 첫 번째 셀 이후의 모든 셀을 선택하고 두 번째 선택기는 투명하게 만들 다섯 번째 셀을 선택합니다.

<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.