css实现表格隔行颜色不一样的效果解决方案
日期：2014-05-17 浏览次数：20829 次
css实现表格隔行颜色不一样的效果
怎样css实现表格隔行颜色不一样的效果，表格中数据是变得，行数不一定
------解决方案--------------------
如果行高度固定，可以用背景图片实现。
------解决方案--------------------
如果真的很实现这种效果,用JS可以实现,不过最简单的办法,你在生成表格的时候用 mod 2来判断是否是复数行,来设置背景色或设置class
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
<style>
.mytb {
width:300px;
height:20px;
border-bottom: 1px #f00 solid;
}
.mytb th {
background-color: #ff9d7f;
border: 1px #ff9d7f solid;
border-bottom: 1px #f00 solid;
}
.mytb td {
text-align: center;
background-color:expression((this.parentElement.sectionRowIndex%2==0)? '#efffa7 ': '#fff ');
}
</style>
</HEAD>
<BODY>
<table class= "mytb " cellspacing= "0 " cellpadding= "0 ">
<tr> <th> 000 </th> <th> 000 </th> <th> 000 </th> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
</table>
</BODY>
</HTML>
------解决方案--------------------
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.mytb tr.c1 {
background-color: #ff9d7f;
}
.mytb tr.c2 {
background-color: #EEEEEE;
}
</style>
</HEAD>
<BODY>
<table class= "mytb " cellspacing= "0 " cellpadding= "0 ">
<tr class= "c1 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c2 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c1 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c2 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c1 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c2 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
</table>
</BODY>
</HTML>
------解决方案--------------------
<style>
tr.tr_1 {
background-color: #ff9d7f;
}
tr.tr_2{
background-color: #EEEEEE;
}
</style>
<script>
function initTableCss(){
var tab=document.getElementById( "tab ");
for(var i=0;i <tab.rows.length;i++){
tab.rows[i].className=(i%2==1)? "tr_1 ": "tr_2 ";
}
}
window.onload=initTableCss;
</script>
<table id= "tab " />
怎样css实现表格隔行颜色不一样的效果，表格中数据是变得，行数不一定
------解决方案--------------------
如果行高度固定，可以用背景图片实现。
------解决方案--------------------
如果真的很实现这种效果,用JS可以实现,不过最简单的办法,你在生成表格的时候用 mod 2来判断是否是复数行,来设置背景色或设置class
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
<style>
.mytb {
width:300px;
height:20px;
border-bottom: 1px #f00 solid;
}
.mytb th {
background-color: #ff9d7f;
border: 1px #ff9d7f solid;
border-bottom: 1px #f00 solid;
}
.mytb td {
text-align: center;
background-color:expression((this.parentElement.sectionRowIndex%2==0)? '#efffa7 ': '#fff ');
}
</style>
</HEAD>
<BODY>
<table class= "mytb " cellspacing= "0 " cellpadding= "0 ">
<tr> <th> 000 </th> <th> 000 </th> <th> 000 </th> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
</table>
</BODY>
</HTML>
------解决方案--------------------
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.mytb tr.c1 {
background-color: #ff9d7f;
}
.mytb tr.c2 {
background-color: #EEEEEE;
}
</style>
</HEAD>
<BODY>
<table class= "mytb " cellspacing= "0 " cellpadding= "0 ">
<tr class= "c1 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c2 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c1 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c2 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c1 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c2 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
</table>
</BODY>
</HTML>
------解决方案--------------------
<style>
tr.tr_1 {
background-color: #ff9d7f;
}
tr.tr_2{
background-color: #EEEEEE;
}
</style>
<script>
function initTableCss(){
var tab=document.getElementById( "tab ");
for(var i=0;i <tab.rows.length;i++){
tab.rows[i].className=(i%2==1)? "tr_1 ": "tr_2 ";
}
}
window.onload=initTableCss;
</script>
<table id= "tab " />
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
