分享7款颜⾊的CSS表格样式美化⽹页表格⽤户体验
原⽂出处：
⽼左并不是⼀名⽹页设计师，但是经常在博客上捣⿎、修改⼀些⾃认为不太好的⽤户体验也仅仅局限在修改⼀些简单的CSS样式上，遇到不能解决的问题可以通过搜索查阅⽂档。随着时间的积累，我们越发感觉到CSS样式的⽆穷奇妙，⽐如我们在制作某个表格时候，可以简单的利⽤CSS样式表的修改变化多样的。在页⾯布局和内容分享的时候，表格是⽐较常⽤到的，有些时候⽼左在分享评测内容的时候，为了图省事可能就直接截图，以后可能会多⼀些样式的分享，这样⽤户体验以及如果信息有变动可以直接修改，⽽不是再截图。
在之前博⽂中，已经有分享过⼏篇关于的内容：
今天⽼左在浏览⼏个海外前端博客时候，看到以下7款颜⾊样式的整理还是⽐较好的，尤其是需要在⽹页中添加表格时候，看似简单的样式，但是在需要使⽤的时候就直接复制，节省很多时间。
第⼀种：
样式之⼀
CSS样式代码部分：
/* Border styles */
#table-1 thead, #table-1 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
#table-1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}
/* Padding and font style */
#table-1 td, #table-1 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}
/* Alternating background colors */
#table-1 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
#table-1 tr:nth-child(odd) {
background: #FFF
}
第⼆种：
CSS表格样式之⼆
CSS样式代码部分：
/* Border styles */
#table-2 thead, #table-2 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
#table-2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189); }
/* Padding and font style */
#table-2 td, #table-2 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}
/* Alternating background colors */
#table-2 tr:nth-child(even) { background: rgb(238, 211, 210)
}
#table-2 tr:nth-child(odd) { background: #FFF
}
第三种：
CSS表格样式之三
CSS样式代码部分：
border-top-color: rgb(235, 242, 224);
}
#table-3 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(235, 242, 224); }
/* Padding and font style */
#table-3 td, #table-3 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(149, 170, 109);
}
/* Alternating background colors */
#table-3 tr:nth-child(even) { background: rgb(230, 238, 214)
}
#table-3 tr:nth-child(odd) { background: #FFF
}
第四种：
CSS表格样式之四
CSS代码样式部分：
border-top-color: rgb(211, 202, 221);
}
#table-4 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(211, 202, 221); }
/* Padding and font style */
#table-4 td, #table-4 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(95, 74, 121);
}
好看的css代码/* Alternating background colors */
#table-4 tr:nth-child(even) { background: rgb(223, 216, 232)
}
#table-4 tr:nth-child(odd) { background: #FFF
}
第五种：
CSS表格样式之五
CSS代码样式部分：
/* Table Head */
#table-5 thead th {
background-color: rgb(156, 186, 95); color: #fff;
border-bottom-width: 0;
}
/* Column Style */
#table-5 td {
color: #000;
}
/* Heading and Column Style */
#table-5 tr, #table-5 th {
border-width: 1px;
border-style: solid;
border-color: rgb(156, 186, 95);
}
/* Padding and font style */
#table-5 td, #table-5 th { padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}
第六种：
CSS表格样式之六
CSS样式代码部分：

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