在我们日常 大前端开发中，查看报表的时候，表格内容过长，这时候就可能会有需求：固定表头查看内容。 下面是解决办法
样式：
.tableBox table{width:100%}
.tableBox thead{width:100%;border-top:1px solid #c5d9f1;border-left:1px solid #c5d9f1}
.tableBox tbody td,.tableBox thead th{height:30px;line-height:30px;text-align:center;font-size:12px;color:#404040}
.tableBox thead th{background-color:#d8e5f4;border-bottom:1px solid #c5d9f1;border-right:1px solid #c5d9f1}
.tableBox tbody{border-left:1px solid #dcdddd}
.tableBox tbody td{border-bottom:1px solid #dcdddd;border-right:1px solid #dcdddd;background-color:#fff}
.tableBox tbody tr:nth-child(even) td{background-color:#f9f9f9}
.tableBox table td,.tableBox table th{vertical-align:middle}
html部分:
<div class="tableBox">
<table id="tableid" border="0" cellspacing="0" cellpadding="0" style="position: absolute; top: 0px; left: 0px;">
<thead>
<tr>
<th rowspan="2">省市</th>
<th colspan="10">资产属性</th>
<th colspan="6">营业状态</th>
<th colspan="3">销售状态</th>
</tr>
<tr>
<th>小计</th>
<th>自建</th>
<th>收购</th>
<th>控股</th>
<th>长租</th>
<th>短租</th>
<th>参股</th>
<th>特许</th>
<th>租赁</th>
<th>全资</th>
<th>小计</th>
<th>初始状态</th>
<th>正常营业</th>
<th>临时关闭</th>
<th>永久关闭</th>
<th>组织机构调整</th>
<th>小计</th>
<th>有销量</th>
<th>无销量</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>合计</td>
<td>1449</td>
<td>460</td>
<td>741</td>
<td>7</td>
<td>143</td>
<td>97</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1449</td>
<td>30</td>
<td>1238</td>
<td>114</td>
<td>54</td>
<td>13</td>
<td>1449</td>
<td>1224</td>
<td>225</td>
</tr>
<tr>
<td>鞍山分公司</td>
<td>118</td>
<td>35</td>
<td>61</td>
<td>0</td>
<td>19</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>118</td>
<td>0</td>
<td>99</td>
<td>11</td>
<td>8</td>
<td>0</td>
<td>118</td>
<td>97</td>
<td>21</td>
</tr>
<tr>
<td>盘锦分公司</td>
<td>55</td>
<td>13</td>
<td>29</td>
<td>1</td>
<td>2</td>
<td>10</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>55</td>
<td>0</td>
<td>39</td>
<td>7</td>
<td>9</td>
<td>0</td>
<td>55</td>
<td>39</td>
<td>16</td>
</tr>
<tr>
<td>丹东分公司</td>
<td>86</td>
<td>38</td>
<td>34</td>
<td>0</td>
<td>8</td>
<td>6</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>86</td>
<td>0</td>
<td>73</td>
<td>11</td>
<td>2</td>
<td>0</td>
<td>86</td>
<td>71</td>
<td>15</td>
</tr>
<tr>
<td>锦州分公司</td>
<td>86</td>
<td>27</td>
<td>49</td>
<td>0</td>
<td>2</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>86</td>
<td>0</td>
<td>76</td>
<td>6</td>
<td>2</td>
<td>2</td>
<td>86</td>
<td>76</td>
<td>10</td>
</tr>
<tr>
<td>营口分公司</td>
<td>117</td>
<td>46</td>
<td>50</td>
<td>0</td>
<td>14</td>
<td>7</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>117</td>
<td>1</td>
<td>95</td>
<td>9</td>
<td>6</td>
<td>6</td>
<td>117</td>
<td>95</td>
<td>22</td>
</tr>
<tr>
<td>阜新分公司</td>
<td>86</td>
<td>10</td>
<td>66</td>
<td>0</td>
<td>5</td>
<td>5</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>86</td>
<td>0</td>
<td>82</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>86</td>
<td>82</td>
<td>4</td>
</tr>
<tr>
<td>辽阳分公司</td>
<td>65</td>
<td>17</td>
<td>38</td>
<td>0</td>
<td>6</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>65</td>
<td>1</td>
<td>53</td>
<td>4</td>
<td>7</td>
<td>0</td>
<td>65</td>
<td>53</td>
<td>12</td>
</tr>
<tr>
<td>铁岭分公司</td>
<td>82</td>
<td>18</td>
<td>61</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>82</td>
<td>0</td>
<td>77</td>
<td>4</td>
<td>1</td>
<td>0</td>
<td>82</td>
<td>77</td>
<td>5</td>
</tr>
<tr>
<td>朝阳分公司</td>
<td>64</td>
<td>22</td>
<td>25</td>
<td>1</td>
<td>16</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>64</td>
<td>0</td>
<td>58</td>
<td>4</td>
<td>2</td>
<td>0</td>
<td>64</td>
<td>57</td>
<td>7</td>
</tr>
<tr>
<td>葫芦岛分公司</td>
<td>62</td>
<td>22</td>
<td>35</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>62</td>
<td>0</td>
<td>55</td>
<td>7</td>
<td>0</td>
<td>0</td>
<td>62</td>
<td>54</td>
<td>8</td>
</tr>
<tr>
<td>润滑油分公司</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>沈阳分公司</td>
<td>193</td>
<td>59</td>
<td>65</td>
<td>5</td>
<td>31</td>
<td>33</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>193</td>
<td>0</td>
<td>157</td>
<td>21</td>
<td>15</td>
<td>0</td>
<td>193</td>
<td>154</td>
<td>39</td>
</tr>
<tr>
<td>大连分公司</td>
<td>314</td>
<td>110</td>
<td>156</td>
<td>0</td>
<td>36</td>
<td>11</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>314</td>
<td>28</td>
<td>263</td>
<td>18</td>
<td>0</td>
<td>5</td>
<td>314</td>
<td>258</td>
<td>56</td>
</tr>
<tr>
<td>本溪分公司</td>
<td>52</td>
<td>20</td>
<td>29</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>52</td>
<td>0</td>
<td>46</td>
<td>6</td>
<td>0</td>
<td>0</td>
<td>52</td>
<td>46</td>
<td>6</td>
</tr>
<tr>
<td>抚顺分公司</td>
<td>69</td>
<td>23</td>
<td>43</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>69</td>
<td>0</td>
<td>65</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>69</td>
<td>65</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
js部分:
// 滑动滚动条
tableHeader()
function tableHeader() {
$("#tableid").parent().prepend(
'<table id="tableid_" border="0" cellspacing="0" cellpadding="0"><thead>' + $("#tableid thead").html() + '</thead></table>'
).css({
'position': 'relative',
'height': '300px',
'overflow-y': 'auto'
})
$("#tableid_").find('th').each(function(i) {
$(this).css('width', $('#tableid').find('th:eq(' + i + ')').width());
});
$("#tableid_").css({
'position': 'absolute',
'top': '0',
'left': 0,
'z-index': 2
})
$("#tableid").css({
'position': 'absolute',
'top': 0,
'left': 0
})
$('.tableBox').scroll(function() {
if ($('.tableBox').scrollTop() > 0) {
$("#tableid_").css('top', $('.tableBox').scrollTop());
} else {
$("#tableid_").css('top', 0);
}
});
}
网友评论