테이블의 테두리는 페이지 생성에서 가장 번거로운 작업입니다. 테두리가 있는 테이블은 예전에는 만들기가 매우 귀찮았는데, 오늘은 이 문제를 드디어 해결했습니다.
페이지 생성 시 가장 큰 골칫거리 중 하나는 테이블의 테두리입니다. 저는 테두리가 있는 테이블을 만드는 것을 싫어합니다. 오늘 드디어 이 문제를 해결했습니다
border-collapseattribute 그동안 고민했던 문제가 해결되었습니다. a long time
CSS
코드는 다음과 같습니다.
.table{ border: 1px solid #ccc; border-collapse: collapse; width:80%;} .table th, .table td{ border: 1px solid #ccc; padding: 10px; }
Html
<table class="table"> <thead> <tr> <th>id</th> <th>作者</th> <th>书名</th> <th>内容</th> <th>分类</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>唐家三少</td> <td>斗破苍穹</td> <td>斗破苍穹斗破苍穹</td> <td>玄幻</td> </tr> <tr class="success"> <td>001</td> <td>唐家三少</td> <td>斗破苍穹</td> <td>斗破苍穹斗破苍穹</td> <td>玄幻</td> </tr> </tbody> </table>
PS: border-collapse 속성 사용 전후 비교
위 내용은 CSS: border-collapse 속성은 테이블의 테두리 문제를 해결합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!