今天拿到一张设计图，竟然是隔列变色的，怨念。
其实用纯CSS就可以做到，但是由于页面之前已经引入了jquery框架，所以索性用jquery做了一个，效果如下
隔行变色demo（从专题页面分离）
关键就是colgroup这个不常用的标签解决了问题，标签的含义是把划分列。如果你有四列那么你需要写四个colgroup标签，如上例的demo一样。当然你也可以自己划分区域，你可以这样写
<colgroup span=”2″></colgroup>这行代码的意思是这行标签选中了当前表格的两列，这样你就可以灵活的定义表格区域了。
如果只写<colgroup></colgroup>这一行，那么代表只选中了当前表格的第一列。
如果用纯CSS控制，只需要给对应的colgroup标签一个样式用来控制指定列的样子。在当前页面没有引入js的情况下可以这样使用，毕竟为了一个这种效果而引入某个框架是不太科学的。
/*这世界充满了诱惑*/
相关日志-小站地图为你展开
<![CDATA[
<ol>
<li class="comment even thread-even depth-1" id="li-comment-1970">
<div id="comment-1970">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/96764fa10254db0b2b86c652d693467f.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://blueandhack.com' rel='external nofollow' class='url'>blueandhack</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 7.0.517.41' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在576 天之前</span>
</div>
<div class="comment-text clearfix">
<p>这是沙发吗？</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-col-changecolor?replytocom=1970#respond' onclick='return addComment.moveForm("comment-1970", "1970", "respond", "690")'>回复</a> </div>
</div>
</li>
</ol>
]]>
快来吐槽吧
