分享7款颜色的CSS表格样式美化网页表格用户体验 |
您所在的位置:网站首页 › 表格什么配色好看 › 分享7款颜色的CSS表格样式美化网页表格用户体验 |
转载自:https://www.laozuo.org/4631.html 今天老左在浏览几个海外前端博客时候,看到以下7款颜色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样式代码部分: /* 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样式代码部分: /* 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代码样式部分: /* 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 }第五种: 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样式代码部分: /* Table Head */ #table-6 thead th { background-color: rgb(128, 102, 160); color: #fff; border-bottom-width: 0; } /* Column Style */ #table-6 td { color: #000; } /* Heading and Column Style */ #table-6 tr, #table-6 th { border-width: 1px; border-style: solid; border-color: rgb(128, 102, 160); } /* Padding and font style */ #table-6 td, #table-6 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; font-weight: bold; }第七种: CSS样式代码部分: /* Table Head */ #table-7 thead th { background-color: rgb(81, 130, 187); color: #fff; border-bottom-width: 0; } /* Column Style */ #table-7 td { color: #000; } /* Heading and Column Style */ #table-7 tr, #table-7 th { border-width: 1px; border-style: solid; border-color: rgb(81, 130, 187); } /* Padding and font style */ #table-7 td, #table-7 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; font-weight: bold; }以上7种颜色的CSS表格样式部分,根据我们自己的需要可以直接复制不同的颜色部分加上行列的修改。然后加在下面的TABLE表格部分中: Name City Phone Albert Ellis New York +1 718 000000 Marcus Aurelius Rome +1 718 000000 Epictetus Greece +1 718 000000 Aristotle Greece +1 718 000000
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |