分享多款颜色的CSS表格样式 美化网页表格样式提升用户体验

WEB前端 Alice 3年前 (2017-06-13) 500次浏览 0个评论

  对于一名程序员而言,经常在博客上捣鼓、修改一些自认为不太好的 CSS 表格样式是经常的,遇到不能解决的问题还可以通过搜索查阅文档。随着时间的积累,我们越发感觉到 CSS 样式的无穷奇妙,比如我们在制作某个表格时候,可以简单的利用 CSS 样式表的修改变化多样的 CSS 表格样式。在页面布局和内容分享的时候,表格是比较常用到的,有些时候为了图省事可能就直接截图,以后可能会多一些样式的分享,这样用户体验以及如果信息有变动可以直接修改,而不是再截图。
  以下几款颜色 CSS 表格样式的整理还是比较好的,尤其是需要在网页中添加表格时候,看似简单的样式,但是在需要使用的时候就直接复制,节省很多时间。
第一种:
分享多款颜色的 CSS 表格样式 美化网页表格样式提升用户体验
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 styles */
#table-3 thead, #table-3 tr {
border-top-width: 1px;
border-top-style: solid;
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 styles */
#table-4 thead, #table-4 tr {
border-top-width: 1px;
border-top-style: solid;
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);
}

/* Alternating background colors */
#table-4 tr:nth-child(even) {
background: rgb(223, 216, 232)
}
#table-4 tr:nth-child(odd) {
background: #FFF
}

女程序员博客 , 版权所有丨本站采用BY-NC-SA协议进行授权 , 转载请注明分享多款颜色的 CSS 表格样式 美化网页表格样式提升用户体验
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址