2021年07月03日 10:37 1270 举报
分享一个比较常用的表格(table)代码及样式+ 分享一个源码
在网页设计中经常会用到表格(table)代码

table HTML代码

<!--带边框的table-->
<table class="TAB11 B">
    <tr>
        <td>表格1-1</td>
        <td>表格1-2</td>
        <td>表格1-3</td>
    </tr>
    <tr>
        <td>表格2-1</td>
        <td>表格2-2</td>
        <td>表格2-3</td>
    </tr>
</table>
<!--带横向边框的table-->
<table class="TAB10">
    <tr>
        <td>表格1-1</td>
        <td>表格1-2</td>
        <td>表格1-3</td>
    </tr>
    <tr>
        <td>表格2-1</td>
        <td>表格2-2</td>
        <td>表格2-3</td>
    </tr>
</table>
<!--带纵向边框的table-->
<table class="TAB01">
    <tr>
        <td>表格1-1</td>
        <td>表格1-2</td>
        <td>表格1-3</td>
    </tr>
    <tr>
        <td>表格2-1</td>
        <td>表格2-2</td>
        <td>表格2-3</td>
    </tr>
</table>
<!--带背景的table-->
<table class="TAB01 BG2">
    <tr>
        <td>表格1-1</td>
        <td>表格1-2</td>
        <td>表格1-3</td>
    </tr>
    <tr>
        <td>表格2-1</td>
        <td>表格2-2</td>
        <td>表格2-3</td>
    </tr>
</table>

隔行换色背景还可根据自己的实际需求进行扩展

table CSS代码

table{border-collapse:collapse;border-spacing:0;}
table thead{background:#F1F1F1;}
table tr th,table tr td{padding:0.3rem;}
table.BG2 tr:nth-child(2n) th,table.BG2 tr:nth-child(2n) td{background:#F1F1F1;}
table.BG2 tr:nth-child(2n+1) th,table.BG2 tr:nth-child(2n+1) td{background:#F8F8F8;}

table.BG3 tr:nth-child(3n) th,table.BG3 tr:nth-child(3n) td{background:#F1F1F0;}
table.BG3 tr:nth-child(3n+1) th,table.BG3 tr:nth-child(3n+1) td{background:#F0F5F5;}
table.BG3 tr:nth-child(3n+2) th,table.BG3 tr:nth-child(3n+2) td{background:#F8F0F8;}

.TAB01 tr th,.TAB01 tr td{border-right:1px solid #DDD;}
.TAB01 tr th:last-child,.TAB01 tr td:last-child{border-right:0;}
.TAB10 tr th,.TAB10 tr td{border-bottom:1px solid #DDD;}
.TAB10 tr:last-child th,.TAB10 tr:last-child td{border-bottom:0;}
.TAB11 tr th,.TAB11 tr td{border-right:1px solid #DDD;border-bottom:1px solid #DDD;}
.TAB11 tr th:last-child,.TAB11 tr td:last-child{border-right:none;}
.TAB11 tr:last-child th,.TAB11 tr:last-child td{border-bottom:0;}

.B{border:1px solid #EEE;}

可以按照上面的代码逻辑扩展自己的CSS样式,让您的表格显现的更加丰富

本文链接:https://www.zhanzhangshequ.com/433.html [ 点击复制 ] 喜欢(0) 收藏(0)
您需要 [ 登录 ] 后方可进行评论或回复
    很明显 沙发是空的 您看着办吧~
最新签到
时间 20:44:52签到 1次
时间 15:27:10签到 3次
时间 13:25:25签到 13次
时间 14:35:06签到 3次
时间 17:19:37签到 3次
时间 10:23:23签到 13次
时间 14:03:37签到 18次
时间 14:36:06签到 13次
最新来访
来访 852次 引流 31次
备案号皖ICP备13016897号-16
京公网安备34060002040025号
©2020-2021 BY 站长主题