html在线表格样式模板，纯css实现的table表格样式，教程站常
⽤
本⽂介绍⼀个table表格样式，是⼀种很友好的看着很舒服的表格样式，常见⽤于教程站⾥。这也是是个⼗分通⽤的table表格样式，可以说⼤部分⽹页都适⽤。
效果图如下
table表格样式
代码分析
css代码
table.dataintable {
margin-top:15px;
border-collapse:collapse;
border:1px solid #aaa;
width:100%;
}
table.dataintable th {
vertical-align:baseline;
padding:5px 15px 5px 6px;
background-color:#3F3F3F;
border:1px solid #3F3F3F;
text-align:left;
color:#fff;
}
table.dataintable td {
vertical-align:text-top;
padding:6px 15px 6px 6px;
border:1px solid #aaa;
}
table.dataintable tr:nth-child(odd) {
background-color:#F5F5F5;
}
table.dataintable tr:nth-child(even) {
background-color:#fff;
}
html代码
值描述
outline-color规定边框的颜⾊。
outline-style规定边框的样式。
outline-width规定边框的宽度。
inherit规定应该从⽗元素继承 outline 属性的设置。
代码解释：如何做到表格 TR 单双⾏颜⾊相间⽽不同？
从效果图看到，表格 TR 单双⾏颜⾊相间⽽不同，这⽐整个表格同⼀颜⾊好看很多，若表格⼤⼜长时看起来就不会觉得那么累。关键代码如下：
html网页设计 table
table.dataintable tr:nth-child(odd) {
background-color:#F5F5F5;
}
table.dataintable tr:nth-child(even) {
background-color:#fff;
}
代码⾥ odd 和 even 是定义单双⾏的样式，其中 odd 是单⾏，⽽ even 是双⾏。

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