Bootstrap笔记3—表格table

表格

具体参考Bootstrap中文网手册。

1.基础样式

class="table"

<table class="table">    <tr>        <th>序号</th><th>姓名</th><th>年龄</th>           </tr>    <tr>        <td>1</td><td>张三</td><td>18</td>            </tr>    <tr>        <td>2</td><td>李四</td><td>22</td>            </tr>    <tr>        <td>3</td><td>王五</td><td>16</td>            </tr>    <tr>        <td>4</td><td>赵六</td><td>24</td>            </tr></table>

2.条纹样式

class="table table-striped"

代码同基础样式代码一样，只是 class=”table”变为class=”table table-striped”，是在基础样式上添加条纹。

3.带边框

class="table table-bordered"

带边框带条纹可以一起使用

class="table table-bordered table-striped"

4.鼠标悬停当前行显示灰色背景

class="table table-hover"

鼠标悬停在序号一上，序号一显示灰色背景。

5.紧凑型表格

class="table-condensed"

　

6.响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">    <table class="table">...</table></div>