table樣式

一直以來，css和JS都是軟肋，因為需要不得不重新溫故。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">table.hovertable{    font-family: verdana,arial,sans-serif;font-size:11px;    color:#333333;border: 1px solid #C3DDE0;border-collapse: collapse;}table.hovertable th{    background-color:#F0F0F0;border-width: 1px;padding: 8px;border-width: 1px;border-style: solid;border-color: #C3DDE0;}table.hovertable tr{    background-color:#FFFFFF;border-width: 1px;border-style: solid;border-color: #C3DDE0;}table.hovertable.hover,table.hovertable tr.altrow{background-color:#d4e3e5 ;}table.hovertable td{    border-width: 1px;padding: 8px;    border-style: solid;    border-color: #C3DDE0;}</style><script type="text/javascript" >window.onload = function () {var rows = document.getElementsByTagName("tr");for (var i=1; i<=rows.length;i++){rows[i].onmouseover=function(){this.className +='altrow';//鼠標經過時，顯示樣式altrow
                }rows[i].onmouseout = function(){this.className = this.className.replace('altrow','');//鼠標走的時候，顯示樣式清空
                }}}</script>
</head>
<body>
<table class="hovertable"><tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr><td>Item 1A</td><td>Item 1B</td><td>Item 1C</td></tr><tr><td>Item 2A</td><td>Item 2B</td><td>Item 2C</td></tr><tr><td>Item 3A</td><td>Item 3B</td><td>Item 3C</td></tr><tr><td>Item 4A</td><td>Item 4B</td><td>Item 4C</td></tr><tr><td>Item 5A</td><td>Item 5B</td><td>Item 5C</td></tr>
</table>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/259720.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/259720.shtml
英文地址，請注明出處：http://en.pswp.cn/news/259720.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！