BootStrap table表格插件自适应固定表头(超好用)

首先是简单的页面形式，大家可以按照平常画表格的方式来创建html表格，然后通过js控制特殊的样式等操作（优点是表格更加直观，方便调整表格样式等，速度快）

当然，也可以只在页面上放一个table标签，之后的所有数据和样式都通过js控制也是可以的，后面会说（优点方便控制修改数据，尤其是ajax方式获取的json格式，但是调整样式比较麻烦）

ps：这个是插件的官网，里面有英文api和例子：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

还有，使用前请引入bootstrap的相关css，js，jQuery，以及bootstrap-table的css，js至少这5个基本文件

一，html表格方式

例一：需求，简单的表格数据呈现，表头是两行，还有一个上下浮的箭头

分析：很简单，只需要html就可以实现，按照常规的表格来画，添加上bootstrap-table独有的自定义属性即可，注意如果不使用js请在最开始的table标签中加上data-toggle

html代码：

<div><table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover" id="tableL01"><thead><tr><th data-field="lhc" data-rowspan="2" data-align="center" data-valign="middle">来耗存</th><th data-field="dr" data-colspan="3" data-align="center" data-valign="middle">当日</th><th data-field="bz" data-colspan="3" data-align="center" data-valign="middle">本周</th><th data-field="by" data-colspan="3" data-align="center" data-valign="middle">本月</th></tr><tr><th data-field="drbq" data-align="center" data-valign="middle">本期</th><th data-field="drtb" data-align="center" data-valign="middle">同比</th><th data-field="drhb" data-align="center" data-valign="middle">环比</th><th data-field="bzbq" data-align="center" data-valign="middle">本期</th><th data-field="bztb" data-align="center" data-valign="middle">同比</th><th data-field="bzhb" data-align="center" data-valign="middle">环比</th><th data-field="bybq" data-align="center" data-valign="middle">本期</th><th data-field="bytb" data-align="center" data-valign="middle">同比</th><th data-field="byhb" data-align="center" data-valign="middle">环比</th></tr></thead><tbody><tr><td>来煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>来煤量</td><td>76573</td><td><i class='glyphicon glyphicon-arrow-down'></i>4.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>1.45</td><td>234534</td><td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.75</td><td>44225</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.74</td><td><i class='glyphicon glyphicon-arrow-up'></i>3.45</td></tr><tr><td>耗煤量</td><td>43363</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>32422</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>13345</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>来煤量</td><td>34624</td><td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td><td><i class='glyphicon glyphicon-arrow-up'></i>1.23</td><td>452346</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.32</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.05</td><td>94524</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>耗煤量</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td><td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td><td>3125113</td><td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr></tbody></table></div>