css 实现table 隔行变色
生活随笔
收集整理的這篇文章主要介紹了
css 实现table 隔行变色
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{border:1px solid #0058a3; /* 表格邊框 */font-family:Arial;border-collapse:collapse; /* 邊框重疊 */background-color:#eaf5ff; /* 表格背景色 */font-size:14px;
}
.datalist caption{padding-bottom:5px;font:bold 1.4em;text-align:left;
}
.datalist th{border:1px solid #0058a3; /* 行名稱邊框 */background-color:#4bacff; /* 行名稱背景色 */color:#FFFFFF; /* 行名稱顏色 */font-weight:bold;padding-top:4px; padding-bottom:4px;padding-left:12px; padding-right:12px;text-align:center;
}
.datalist td{border:1px solid #0058a3; /* 單元格邊框 */text-align:left;padding-top:4px; padding-bottom:4px;padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{background-color:#c7e5ff; /* 隔行變色 */
}
-->
</style></head>
<body>
<table class="datalist" summary="list of members in EE Studay"><caption>Member List</caption><tr><th scope="col">Name</th><th scope="col">Class</th><th scope="col">Birthday</th><th scope="col">Constellation</th><th scope="col">Mobile</th></tr><tr> <!-- 奇數行 --><td>isaac</td><td>W13</td><td>Jun 24th</td><td>Cancer</td><td>1118159</td></tr><tr class="altrow"> <!-- 偶數行 --><td>girlwing</td><td>W210</td><td>Sep 16th</td><td>Virgo</td><td>1307994</td></tr><tr> <!-- 奇數行 --><td>tastestory</td><td>W15</td><td>Nov 29th</td><td>Sagittarius</td><td>1095245</td></tr><tr class="altrow"> <!-- 偶數行 --><td>lovehate</td><td>W47</td><td>Sep 5th</td><td>Virgo</td><td>6098017</td></tr><tr> <!-- 奇數行 --><td>slepox</td><td>W19</td><td>Nov 18th</td><td>Scorpio</td><td>0658635</td></tr><tr class="altrow"> <!-- 偶數行 --><td>smartlau</td><td>W19</td><td>Dec 30th</td><td>Capricorn</td><td>0006621</td></tr><tr> <!-- 奇數行 --><td>whaler</td><td>W19</td><td>Jan 18th</td><td>Capricorn</td><td>1851918</td></tr><tr class="altrow"> <!-- 偶數行 --><td>shenhuanyan</td><td>W25</td><td>Jan 31th</td><td>Aquarius</td><td>0621827</td></tr><tr> <!-- 奇數行 --><td>tuonene</td><td>W210</td><td>Nov 26th</td><td>Sagittarius</td><td>0091704</td></tr><tr class="altrow"> <!-- 偶數行 --><td>ArthurRivers</td><td>W91</td><td>Feb 26th</td><td>Pisces</td><td>0468357</td></tr><tr> <!-- 奇數行 --><td>reconzansp</td><td>W09</td><td>Oct 13th</td><td>Libra</td><td>3643041</td></tr><tr class="altrow"> <!-- 偶數行 --><td>linear</td><td>W86</td><td>Aug 18th</td><td>Leo</td><td>6398341</td></tr><tr> <!-- 奇數行 --><td>laopiao</td><td>W41</td><td>May 17th</td><td>Taurus</td><td>1254004</td></tr><tr class="altrow"> <!-- 偶數行 --><td>dovecho</td><td>W19</td><td>Dec 9th</td><td>Sagittarius</td><td>1892013</td></tr><tr> <!-- 奇數行 --><td>shanghen</td><td>W42</td><td>May 24th</td><td>Gemini</td><td>1544254</td></tr><tr class="altrow"> <!-- 偶數行 --><td>venessawj</td><td>W45</td><td>Apr 1st</td><td>Aries</td><td>1523753</td></tr><tr> <!-- 奇數行 --><td>lightyear</td><td>W311</td><td>Mar 23th</td><td>Aries</td><td>1002908</td></tr>
</table>
</body>
</html>
?
轉載于:https://www.cnblogs.com/sihuanian/p/4794385.html
總結
以上是生活随笔為你收集整理的css 实现table 隔行变色的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring mvc+junit
- 下一篇： Codeforces Codeforce