用bootstrap实现表格隔行变色，hover 变色并在需要时出现滚动条

来源：互联网发布：封面制作软件下载编辑：程序博客网时间：2024/06/08 05:22

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html><head><!-- 引入的css压缩文件 --><link rel="stylesheet" type="text/css"href="<%=request.getContextPath()%>/resources/css/bootstrap.min.css"></head><body><div class="table-responsive"><table class="table table-hover table-bordered"><caption>边框表格布局</caption><thead><tr style="background: silver;"><th>名称</th><th>城市</th><th>密码</th><th>名称</th><th>城市</th><th>密码</th></tr></thead><tbody><tr class="success"><td>Tanmay</td><td>Bangalore</td><td>560001</td><td>Tanmay</td><td>Bangalore</td><td>560001</td></tr><tr class="active"><td>Sachin</td><td>Mumbai</td><td>400003</td><td>Tanmay</td><td>Bangalore</td><td>560001</td></tr><tr class="warning"><td>Uma</td><td>Pune</td><td>411027</td><td>Tanmay</td><td>Bangalore</td><td>560001</td></tr><tr class="danger"><td>Uma</td><td>Pune</td><td>411027</td><td>Tanmay</td><td>Bangalore</td><td>560001</td></tr></tbody></table></div><!-- 最后引入js，提高页面加载速度 ，由于这里用的是bootstrap3,所以jquery文件必须是1.9.1以上版本--><script type="text/javascript" language="javascript"src='<%=request.getContextPath()%>/js/bootstrap/jquery-1.9.1.js'></script><!-- 引入的js压缩文件 --><script type="text/javascript" language="javascript"src='<%=request.getContextPath()%>/js/bootstrap/bootstrap.min.js'></script></body></html>

</pre><pre name="code" class="html">

0 0