实用的 Table CSS 样式

2017年1月9日 1 条评论 2.04k 次阅读 0 人点赞

搞过了很多前端,用过不少的表格优化代码,今天整理的这段代码可以说是最实用的一段,喜欢的可以拿去用。本文代码可以实现效果如下:

如果你喜欢上面的样式,就可以动手复制下面的代码了。

<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){

var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");

for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}

window.onload=function(){
altRows('alternatecolor');
}
</script>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
.altrowstable table {
width:96%;
text-align:center;
}
.altrowstable table th {
border-width: 1px;
text-align:center;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.altrowstable table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#fff;
}
.evenrowcolor{
background-color:#e2efda;
}
</style>
<!-- Table goes in the document BODY -->
<div class="altrowstable" id="alternatecolor">
<table>
<tr>
<th>Info Header 1</th>
<th>Info Header 2</th>
<th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td>
<td>Text 1B</td>
<td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td>
<td>Text 2B</td>
<td>Text 2C</td>
</tr>
</tr>
<tr>
<td>Text 3A</td>
<td>Text 3B</td>
<td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td>
<td>Text 4B</td>
<td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td>
<td>Text 5B</td>
<td>Text 5C</td>
</tr>
</table>
</div>

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

文章评论(1)

  • 企业咨询

    谢谢分享

    2017年2月6日