CSS로 깔끔한 표 테두리 스타일 설정

1
2
3
4
5
6
7
8
9
table {
    border-top:1px solid #CCC;
    border-left:1px solid #CCC;
}
table tr td {
    border-right:1px solid #CCC;
    border-bottom:1px solid #CCC;
    padding:0px 5px;
}


표 개별적으로 테두리 스타일 설정

1
2
3
4
5
6
7
8
9
10
<table style="border-width: 1px 1px 0px 0px; border-style: solid solid none none; border-color: rgb(204, 204, 204);" border="0" cellspacing="0" cellpadding="1">
    <tr>
        <td style="width: 120px; height: 18px; border-width: 0px 0px 1px 1px; border-style: none none solid solid; border-color: rgb(204, 204, 204); background-color: rgb(224, 224, 224);"><p align="center">title1</p></td>
        <td style="border-width: 0px 0px 1px 1px; border-style: none none solid solid; border-color: rgb(204, 204, 204);"><p align="center">title2</p></td>
    </tr>
    <tr>
        <td style="width: 120px; height: 18px; border-width: 0px 0px 1px 1px; border-style: none none solid solid; border-color: rgb(204, 204, 204);">contents1</td>
        <td style="border-width: 0px 0px 1px 1px; border-style: none none solid solid; border-color: currentColor">contents2</td>
    </tr>
</table>

Demo

title1

title2
contents1 contents2


저작자표시 비영리 변경금지 (새창열림)

티스토리툴바