htmlcss表格样式模板折叠,Html+CSS1段CSS让表格更漂亮建
议收藏
清爽简约蓝
最终样式
使⽤border-collapse: collapse；去掉表格线间的空⽩。
使⽤:nth-child(even)选择表格中的偶数⾏，进⾏修改背景⾊，如果选择奇数⾏，使⽤odd选择奇数。
使⽤:last-of-type选择最后⼀个元素进⾏画表格底线
HTML表格代码如下：
序号物品名称⾦额备注
1洗⾐粉15.00⾃⼰⽤2洁尔阴25.00⽼婆⽤3搓⾐板5.00⾃⼰⽤
CSS代码如下：
.style-table {
border-collapse: collapse;
margin: 50px auto;
font-size: 0.9em;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.style-table thead tr {
background-color: #0398dd;
color: #ffffff;
text-align: left;
}
.style-table th,
.style-table td {
padding: 12px 15px;
}
.style-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.style-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
.
style-table tbody tr:last-of-type {
border-bottom: 2px solid #0398dd;
}
好看的css代码.style-table tbody tr.active-row {
font-weight: bold;
color: #0398dd;
}
表格连接样式
最终样式
使⽤colspan进⾏⾏合并
使⽤rowspan进⾏列合并
#### html代码：
我是⼀个美丽⼜漂亮⼩公主我是⼀个美丽⼜漂亮
美丽我是
⼀个
⼀个美丽⼜漂亮我是
⼀个美丽⼜漂亮CSS代码
.link-table td:nth-child(1) {
background: #40bf80
}
.link-table td:nth-child(2) {
background: #33cc99
}
.link-table td:nth-child(3) {
background: #26d9bb
}
.link-table td:nth-child(4) {
background: #19e6e6
}
.link-table td:nth-child(5) {
background: #0dccf2
.link-table td:nth-child(6) { background: #01aafe
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。