四个漂亮CSS 样式表
1. 单像素的边框CSS 表格
这是⼀个⾮常所⽤的表格风格。
源码：
border-width: 1px;
padding: 8px; border-style: solid;
border-color: #666666; background-color: #dedede;
}
border-width: 1px;
padding: 8px; border-style: solid;
border-color: #666666; background-color: #ffffff;
}</style>
<!-- Table goes in the document BODY --><table class="gridtable"></table>2. 带背景图的CSS 样式表格和上⾯差点⼉相同，只是每⼀个格⼦⾥多了背景图。cell-blue.jpg
cell-grey.jpg 1. 下载上⾯两张图，命名为cell-blue.jpg 和cell-grey.jpg 2. 拷贝以下的代码到你想要的地⽅。记得改动图⽚url }
table.imagetable th { background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px; border-style: solid;
border-color: #999999;
}table.imagetable td {
<tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr>
3. ⾃⼰主动换整⾏颜⾊的CSS 样式表格（须要⽤到JS ）这个CSS 样式表格⾃⼰主动切换每⼀⾏的颜⾊，在我们须要频繁更新⼀个⼤表格的时候⾮常实⽤。代码： rows[i].className = "evenrowcolor"; }else{
4. ⿏标悬停⾼亮的CSS 样式表格 (须要JS)
纯CSS 显⽰表格⾼亮在IE 中显⽰有问题，所以这边使⽤了JS 来做⾼亮（因为csdn 博客限制了js 的使⽤。我会在最近将博客迁移放到⾃⼰的web 主机上）。
有⼀点要⼩⼼的是，不要定义格⼦的背景⾊。
table.hovertable th {
background-color:#c3dde0; border-width: 1px;
padding: 8px;
border-style: solid; border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
<!-- Table goes in the document BODY -->
<table class="hovertable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
css鼠标点击样式onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>最常见的⼏种CSS 样式表格其中，希望对⼤家有帮助原：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论