CSS를 사용하면 내 테이블 행 아래쪽 테두리가 표시되지 않는 이유는 무엇입니까?

표 행 하단에 테두리를 추가하는 방법

3x3 표가 있고 각 행 하단에 테두리를 추가하려고 합니다. 스타일 속성을 요소가 있지만 작동하지 않았습니다. 그런 다음 다음과 같이 CSS를 추가했습니다.

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

그러나 여전히 작동하지 않았습니다. CSS 사용을 선호하므로 모든 행에 스타일 속성을 추가할 필요가 없습니다.

문제는 테이블 규칙에 border-collapse:collapse를 추가하지 않았다는 것입니다. 이 속성은 브라우저에 인접한 셀의 테두리를 축소하도록 지시합니다. 그렇지 않으면 테두리가 서로 겹쳐져 선을 보기 어렵게 됩니다.

문제를 해결하려면 테이블 규칙에 border-collapse:collapse를 추가하세요.

table {
border-collapse: collapse;
}

예는 다음과 같습니다.

table {
border-collapse: collapse;
}

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

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

이렇게 하면 각 행의 하단에 1pt 검정색 테두리가 추가됩니다. 당신의 테이블.

위 내용은 CSS를 사용하면 내 테이블 행 아래쪽 테두리가 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!