CSS를 통해 열의 각 표 셀 스타일을 지정하는 방법은 무엇입니까?
일반 HTML 테이블이 있습니다.
<table>
<tr>
<td class="first-column-style">FAT</td>
<td>...</td>
</tr>
<tr>
<td class="first-column-style">FAT</td>
<td>...</td>
</tr>
</table>
td특정 열의 모든 표 셀 ( )에 CSS 스타일을 적용하고 싶습니다 . 해당 열의 모든 테이블 셀에 class/ style속성을 적용 하지 않고 JavaScript없이 그렇게 할 수 있습니까?
이 가이드에 따라 <col>태그를 사용 하고 스타일을 지정합니다 . 이렇게 하면 테이블 의 각 요소 대신 요소에 클래스 (또는 인라인 스타일 사양) 만 추가하면됩니다 .<col><td>
주의 사항 :
- 모든 행 또는 셀 스타일은 열 스타일을 대체합니다.
<col>태그 만 지원 스타일링border,background,width및visibility(및 이들의 유도체와 같은background-color).border(가)하지 않는 한 선언은 작동하지 않습니다<table>가border-collapse: collapse;, 그리고 동작은 브라우저 사이에 일치하지 않습니다.visibility선언 인해 제대로 크롬에서 작동하지 않는 알려진 버그 .
Sean Patrick Floyd의 솔루션 외에도 :first-child인접한 형제 선택기와 결합 할 수 있습니다 +(IE6에서도 지원되지 않음).
td:first-child { /* first column */ }
td:first-child + td { /* second column */ }
td:first-child + td + td { /* third column */ }
/* etc. */
2015 년 답변, 첫 번째 아이 답변을 기반으로하지만 훨씬 더 깨끗합니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
td:nth-child(1) { /* first column */ }
td:nth-child(2) { /* second column */ }
td:nth-child(3) { /* third column */ }
매우 깨끗한 코드
첫 번째 및 마지막 열에 대해 :first-child및 :last-child의사 클래스를 사용할 수 있습니다 .
/* make the first cell of every row bold */
tr td:FIRST-CHILD{
font-weight:bold;
}
/* make the last cell of every row italic */
tr td:LAST-CHILD{
font-style:italic;
}
참고:
다음을 사용하면 테이블 수준에서 열의 스타일을 지정할 수 있으며 스타일 시트 자체 내에서 지정된 열 인덱스에 적용된 스타일에 대해 가정 할 필요가 없기 때문에 이전 예제에 대한보다 일반적인 방법으로 사용할 수 있습니다.
나는 <col> 접근법이 당신의 필요에 맞다면 최선이라는 데 동의하지만 스타일의 범위는 매우 제한적입니다.
샘플 스타일 열 1, 2, 4는 회색 텍스트 스타일입니다.
HTML
<table class="example col1-readonly col2-readonly col4-readonly">
CSS
.example.col1-readonly tr td:nth-child(1),
.example.col2-readonly tr td:nth-child(2),
.example.col3-readonly tr td:nth-child(3),
.example.col4-readonly tr td:nth-child(4) {
color:#555;
}
이것은 오래된 게시물입니다. 하지만 같은 질문이있었습니다. 이것이 작동하는 것을 발견했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(3)>td:nth-child(2){background: red;}
</style>
</head>
<table>
<tr><td></td><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>2</td><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>3</td><td>A3</td><td>B3</td><td>C3</td></tr>
</table>
</html>
이 스타일 설정은 세 번째 행과 두 번째 열에서 배경색을 빨간색으로 설정합니다.
참고 URL : https://stackoverflow.com/questions/3880248/how-to-style-each-table-cell-in-a-column-via-css
'Programing' 카테고리의 다른 글
| Ubuntu에서 영구적으로 PATH 변경 (0) | 2020.12.10 |
|---|---|
| / test 클래스에 대한 구성 요소를 생성하지 않는 Dagger (0) | 2020.12.10 |
| 주어진 문자열 날짜의 마지막 날 가져 오기 (0) | 2020.12.10 |
| “/ usr / bin / env : ruby_executable_hooks : No such file or directory”를 해결하는 방법은 무엇입니까? (0) | 2020.12.10 |
| Python에서 비어 있지 않은 경우 여러 문자열 결합 (0) | 2020.12.10 |