一、业务需求
web系统中有的用户不喜欢分页，希望数据能在一个页面中全部显示出来。
但是页面中是有滚动条的，当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列。
也就是无法知道这个列是什么数据。
所以，希望table的标题固定，而数据行中数据过多时出现滚动条，这样比较人性化。
二、js方法(需要和三、页面中的div和table布局 配套使用。div和table的id已经被指定)
备注:使用此方法，需要jquery。
1 /* 2 *用途:处理表头固定，表格数据行出现滚动条，两个表格列的对齐问题 3 //tbTitle为标题table 4 //tbData为数据table 5 //FisrtColWidth为自定义第一列的宽度(可以为空，不指定值) 6 */ 7 function TableVerticalAlignment(FisrtColWidth) { 8 ????//重新设置titleTable所在的div宽度 9 ????$("#divTableTitle").width($("#divData").width());10 11 ????var tbTitle_width = $("#tbTitle tr:first th").length;12 ????//标题行第一列的宽度，自定义。目前使用的是像素。13 ????if (FisrtColWidth != "" && FisrtColWidth != null && FisrtColWidth != undefined) {14 ????????$("#tbTitle tr:first th").eq(0).width(FisrtColWidth);15 ????}16 ????for (i = 0; i < tbTitle_width; i++) {17 ????????$("#tbData tr:first td").eq(i).width($("#tbTitle tr:first th").eq(i).width())18 ????}19 }三、页面中的div和table布局
1、使用ajax获取的表格(原生的html代码)
1 //页面中div和表格的布局 2 <div class="xliebai_i" id="divTableTitle"> 3 <table width="100%" cellspacing="0" cellpadding="0" class="xliebai_u" id="tbTitle"> 4 <thead> 5 <tr> 6 <th> 7 名称 8 </th> 9 </tr>10 </thead>11 </table>12 </div>13 <div class="xliebai_i" style="height: 300px; overflow: auto;" id="divTableData">14 <div id="divData">15 <table width="100%" cellspacing="0" cellpadding="0" class="xliebai_u" id="tbData">16 <tr>17 <td>18 李白19 </td>20 </tr>21 </table>22 </div>23 </div>
2、使用Repeater控件绑定值
1 <div id="divTableTitle"> 2 ????<table id="tbTitle" width="100%" class="table2"> 3 ????????<tr> 4 ????????????<th style="width: 5%"> 5 ????????????????序号 6 ????????????</th> 7 ????????????<th style="width: 10%"> 8 ????????????????品名 9 ????????????</th>10 ????????????<th style="width: 8%">11 ????????????????期初数量12 ????????????</th>13 ????????</tr>14 ????</table>15 </div>16 <div id="divTableData" style="height: 300px; overflow: auto">17 ????<div id="divData">18 ????????<table width="100%" id="tbData" class="table2 table table-striped table-bordered table-hover">19 ????????????<asp:Repeater ID="rptDataList" runat="server">20 ????????????????<ItemTemplate>21 ????????????????????<tr class="light">22 ????????????????????????<td align="center">23 ????????????????????????????<%# Eval("DGNo")%>24 ????????????????????????</td>25 ????????????????????????<td align="center">26 ????????????????????????????<%# Eval("DGName")%>27 ????????????????????????</td>28 ????????????????????????<td align="center">29 ????????????????????????????<%# Eval("BeginningNum", "{0:f2}")%>30 ????????????????????????</td>31 ????????????????????</tr>32 ????????????????</ItemTemplate>33 ????????????????<AlternatingItemTemplate>34 ????????????????????<tr class="gridrowalt light">35 ????????????????????????<td align="center">36 ????????????????????????????<%# Eval("DGNo")%>37 ????????????????????????</td>38 ????????????????????????<td align="center">39 ????????????????????????????<%# Eval("DGName")%>40 ????????????????????????</td>41 ????????????????????????<td align="center">42 ????????????????????????????<%# Eval("BeginningNum", "{0:f2}")%>43 ????????????????????????</td>44 ????????????????????</tr>45 ????????????????</AlternatingItemTemplate>46 ????????????????<FooterTemplate>47 ????????????????????<tr id="Tr1" runat="server" visible=‘<%#bool.Parse((rptDataList.Items.Count==0).ToString())%>‘>48 ????????????????????????<td colspan="3" align="center">49 ????????????????????????????<asp:Label ID="lblInfo" runat="server" Text="暂无数据"></asp:Label>50 ????????????????????????</td>51 ????????????????????</tr>52 ????????????????</FooterTemplate>53 ????????????</asp:Repeater>54 ????????</table>55 ????</div>56 </div>html中table表格标题固定表数据行出现滚动条
原文地址：https://www.cnblogs.com/masonblog/p/8615178.html