저는 부트 스트랩으로 최적화 된 테이블에서 작업 중이며 다음과 같은 문제가 발생합니다. 헤더와 본문 모두 글꼴 크기가 12px이고 열 번호 2가 글꼴 크기가 21px가되기를 원합니다.
즉, 각 열에 대해 원하는대로 글꼴을 사용자 지정할 수 있습니다.
암호:
<table class="table">
<thead>
<tr>
<th style="font-size: 12px;">1</th>
<th style="font-size: 21px;">2</th>
<th style="font-size: 12px;">3</th>
<th style="font-size: 21px;">4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>당신은 사용해야 nth-child/nth-of-type하고 (열 기준) 얼룩말 스타일을 원하는 경우 사용할 수 있습니다 odd및even
/*one approach */
.table th:first-child,
.table td:first-child {
font-size: 21px
}
.table th:nth-child(2),
.table td:nth-child(2) {
font-size: 12px
}
/*second approach */
/* odd */
.table th:nth-child(2n+1),
.table td:nth-child(2n+1) {
background: red
}
/* even */
.table th:nth-child(2n),
.table td:nth-child(2n) {
background: lightblue
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다