bootstrap系列之四表格样式

来源：互联网发布：java方法泛型 t.class 编辑：程序博客网时间：2024/06/05 00:29
效果
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>demo01</title><link rel="stylesheet" href="css/bootstrap.min.css" /></head><body><div class="container"><h1>带条纹</h1><table class="table table-striped"><tr><th>序号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr></table><h1>带边框</h1><table class="table table-bordered table-striped"><tr><th>序号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr></table><h1>悬停</h1><table width="600" class="table table-bordered table-striped table-hover"><tr><th>序号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr></table><h1>坚凑</h1><table class="table table-bordered "><tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr><tr class="success"><td>1</td><td>张三</td><td>22</td></tr><tr class="warning"><td>1</td><td>张三</td><td>22</td></tr><tr  class="danger"><td>1</td><td>张三</td><td>22</td></tr><tr class="active"><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr></table><hr/><hr /><div class="row"><div class="col-sm-4"><div class="table-responsive"><table class="table table-bordered table-striped table-hover"><tr><th>序号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr><tr><td>1</td><td>张三</td><td>22</td></tr></table></div></div></div></div></body></html>
阅读全文
0 0