CSS를 사용하여 표의 각 행에 아래쪽 테두리를 어떻게 추가할 수 있나요?

테이블 행 하단에 테두리 추가

질문

CSS를 사용하여 모든 테이블 행 하단에 테두리를 추가하는 것은 어려운 것 같습니다. tr 요소를 직접 스타일 지정하거나 tr에 CSS 규칙을 적용해도 원하는 결과가 나오지 않았습니다. 인라인 스타일 없이 이를 달성할 수 있는 더 좋은 방법이 있습니까?

해결책

CSS를 사용하여 각 테이블 행의 하단에 테두리를 성공적으로 추가하려면 border-collapse 속성을 사용할 수 있습니다. 표 CSS 규칙에서 이 속성을 축소하도록 설정하면 표 테두리가 함께 병합됩니다.

table { 
    border-collapse: collapse; 
}

이렇게 하면 tr CSS 규칙의 border-bottom 속성을 사용하여 테두리 스타일을 적용할 수 있습니다.

tr {
  border-bottom: 1pt solid black;
}

예

3x3을 고려해보세요 테이블:

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

CSS 규칙을 적용하면 각 행의 하단에만 테두리가 있는 테이블이 생성됩니다.

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1pt solid black;
}

위 내용은 CSS를 사용하여 표의 각 행에 아래쪽 테두리를 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!