Bootstrap：表格

表格

和之前的表格相比，标签更丰富更加语义化，效果更佳美观

1 丰富的标签

　　<table>： 为表格添加基础样式

　　<thead>： 表格标题行的容器元素（<tr>）

　　<tbody>：表格主体中的表格行的容器元素 （<tr>）

　　<tr>： 表格行

　　<td>： 默认的表格单元格

　　<th>： 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用

　　<caption>：关于表格存储内容的描述或总结

　　

2 好看的类样式

　　.table 为任意 <table>添加基本样式 (只有横向分隔线)

　　.table-striped 在 <tbody>内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色

　　.table-bordered 为所有表格的单元格添加边框

　　.table-hover 在 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示

　　.table-condensed 让表格更加紧凑

 

3 情景色类样式

　　适合应用在<th>、<tr>，<td>

　　　　.active 激活效果（悬停颜色）

　　　　.success 表示成功或积极的动作

　　　　.info 表示普通的提示信息或动作

　　　　.warning 表示警告或需要用户注意

　　　　.danger 表示危险或潜在的带来的负面影响的动作

 

4 响应式表格

表格的父元素设置响应式 -- 小于768px，出现边框

<table class="table table-responsive">
    <caption>经营产品大全</caption>
    <thead>
        <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>
        <tr class="info">
            <td>产品1</td>
            <td>2020-1-1</td>
            <td>待发货</td>
        </tr>
        <tr class="active">
            <td>产品2</td>
            <td>2020-1-2</td>
            <td>已发货</td>
        </tr>
        <tr class="success">
            <td>产品3</td>
            <td>2020-1-3</td>
            <td>未付款</td>
        </tr>
        <tr class="warning">
            <td>产品4</td>
            <td>2020-1-4</td>
            <td>已退货</td>
        </tr>
        <tr class="danger">
            <td>产品5</td>
            <td>2020-1-5</td>
            <td>已退款</td>
        </tr>
    </tbody>
</table>