TABLE 테이블을 사용할 때, HTML 제작 초보자는 엣지 두께를 변경하는 방법을 알게 될 텐데, 기본 TABLE 엣지 설정이 1px임에도 불구하고 매우 두꺼워 있기 때문입니다. 따라서 얇은 선 경계를 만드는 다른 방법들도 있으며, 여기 CSS를 활용해 얇은 선을 구현하는 방법이 있습니다. 이 방법은 매우 효과적이고 모든 브라우저와 호환됩니다.
단순히 얇은 선 테이블의 테두리를 설정하면 브라우저가 호환되는지 확인하기 어렵습니다. 일반적인 관행은 CSS2의 "border-collapse: collapse;"를 활용하는 것입니다. 속성 병합 테이블 경계; 테이블 요소는 왼쪽과 상단 테두리를, th와 td 요소는 오른쪽과 하단 경계를 설정하세요.
HTML:
<table> <tr> <th>테이블 헤드 (row1, col1)</th> <th>table head (row1, col2)</th> <th>table head (row1, col3)</th> </tr> <tr> <td>table data (row1, col1)</td> <td>테이블 데이터 (row1, col2)</td> <td>테이블 데이터 (row1, col3)</td> </tr> <tr> <td>테이블 데이터 (row2, col1)</td> <td>table data (row2, col2)</td> <td>테이블 데이터 (row2, col3)</td> </tr>
CSS</table>:
table{border-collapse:collapse; border-spacing:0; 테두리 왼쪽:1px 솔리드 #888; 테두리 상단: 1px 솔리드 #888; 배경:#efefef; }
TH,TD{border-right:1px 솔리드 #888; 테두리-하단: 1px 솔리드 #888; 완장력: 5px 15px; }
th{font-weight:bold; 배경:#ccc; } |
게시됨 2015. 4. 18. 오후 10:19:21
|
|
|
|
게시됨 2015. 7. 15. 오전 1:06:57
|
집주인|
게시됨 2021. 3. 11. 오전 10:51:40
|
지원 자료를 확인해 보세요
