javascript - 怎么实现一个固定头部和固定左边第一列的table
本文介绍了javascript - 怎么实现一个固定头部和固定左边第一列的table的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
有一个页面要放在手机上浏览。
这个页面是一个table。
这个table的头部是固定的，并且左侧第一列也是固定的。
头部固定就是往下滚动，头部不滚动，一直显示在上方。
第一列固定式横向滚动时第一列一直显示在左侧。
同时在横向滚动时头部的标题也要跟着横向滚动的。
现在已经实现固定第一列，但是固定头部一直做不出来，
我用position absolute 或者 fixed定位后排版都乱了，
表头的字段不会跟随数据内容宽度了，而且fiexd定位后横向滚动头部也一直固定了！！！
我实现的效果图：
第一列是固定了，但是如果向上滚动，头部没有固定！！
求大神帮忙，跪谢！！！！
代码，大神你复制这个代码到记事本，然后保存改后缀名html
然后通过QQ找到我的设备>>自己的移动设备发送过去，然后再手机上用浏览器打开就能看到效果！！
感谢大神帮忙！！！！！
<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>待产记录二列表</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button type="button" class="btn btn-info navbar-btn" id="yuyue-button" style="backgroud-color: red;">返回</button>
</div>
</nav>
<div class="table-responsive" style="margin-top: 50px;">
<table class="table table-bordered" id="daichanlist2-2table">
<thead>
<tr>
<th style="position: absolute; left: 0px; background-color: white; width: 89.2px;">日期</th>
<th style="padding-left: 89.2px;">时间</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="app">
<tr class="active">
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-04-29</td>
<td style="padding-left: 89.2px;">21:18</td>
<td>120/80</td>
<td>80</td>
<td></td>
<td>臀先露</td>
<td></td>
<td>4cm</td>
<td>√</td>
<td></td>
<td></td>
<td>中</td>
<td></td>
<td></td>
<td>-1→0</td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr>
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-04-29</td>
<td style="padding-left: 89.2px;">21:50</td>
<td>120/80</td>
<td>90</td>
<td></td>
<td>臀先露</td>
<td></td>
<td>2cm</td>
<td></td>
<td></td>
<td></td>
<td>弱</td>
<td></td>
<td></td>
<td>-1→0</td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr class="active">
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-05-11</td>
<td style="padding-left: 89.2px;">10:25</td>
<td>120/80</td>
<td>90</td>
<td></td>
<td>肩先露</td>
<td></td>
<td>2cm</td>
<td>√</td>
<td></td>
<td></td>
<td>中</td>
<td></td>
<td></td>
<td>+2→+3</td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr>
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-05-13</td>
<td style="padding-left: 89.2px;">14:44</td>
<td>120/80</td>
<td>90</td>
<td></td>
<td>头先露</td>
<td></td>
<td>2cm</td>
<td>√</td>
<td></td>
<td></td>
<td>弱中</td>
<td></td>
<td></td>
<td>-1→0</td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr class="active">
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-05-13</td>
<td style="padding-left: 89.2px;">15:22</td>
<td>112/70</td>
<td>140</td>
<td></td>
<td>头先露</td>
<td></td>
<td>1cm</td>
<td></td>
<td>√</td>
<td></td>
<td>中</td>
<td></td>
<td></td>
<td>-3</td>
<td></td>
<td></td>
<td></td>
<td>殷慧兰</td>
</tr><tr>
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-05-22</td>
<td style="padding-left: 89.2px;">09:26</td>
<td>120/80</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr class="active">
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-05-26</td>
<td style="padding-left: 89.2px;">15:54</td>
<td>/</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr>
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-05-26</td>
<td style="padding-left: 89.2px;">04:54</td>
<td>/</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr class="active">
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-05-26</td>
<td style="padding-left: 89.2px;">15:54</td>
<td>/</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>孕妇入产房待产，身高： cm，</td>
<td>测试</td>
</tr><tr>
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-06-10</td>
<td style="padding-left: 89.2px;">07:14</td>
<td>120/80</td>
<td>2</td>
<td></td>
<td>-2→-1</td>
<td>薄</td>
<td>1cm</td>
<td></td>
<td>√</td>
<td>Ⅰ°→Ⅱ°</td>
<td>弱中</td>
<td>2</td>
<td>3</td>
<td>(-)</td>
<td>好</td>
<td>差</td>
<td></td>
<td>测试</td>
</tr><tr class="active">
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-06-10</td>
<td style="padding-left: 89.2px;">08:00</td>
<td>/</td>
<td></td>
<td></td>
<td></td>
<td>厚</td>
<td>未开</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr>
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-06-10</td>
<td style="padding-left: 89.2px;">08:01</td>
<td>/</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr class="active">
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-06-10</td>
<td style="padding-left: 89.2px;">08:02</td>
<td>/</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>测试</td>
</tr><tr>
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-07-02</td>
<td style="padding-left: 89.2px;">20:16</td>
<td>/</td>
<td></td>
<td></td>
<td>-2→-1</td>
<td></td>
<td>3cm</td>
<td>√</td>
<td></td>
<td>Ⅱ°</td>
<td>弱</td>
<td></td>
<td></td>
<td>(-)</td>
<td></td>
<td></td>
<td>孕妇入产房待产，身高： cm，复测宫高： cm，腹围： cm，疼痛评分： 分。告知分娩相关知识及风险，指导呼吸法减轻疼痛，孕妇及家属理解，有阴道分娩信心。</td>
<td>测试</td>
</tr><tr class="active">
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-07-06</td>
<td style="padding-left: 89.2px;">16:20</td>
<td>127/60</td>
<td>60</td>
<td></td>
<td>-3</td>
<td></td>
<td>未开</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>40</td>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td>孕妇入产房待产，身高： cm，复测宫高： cm，腹围： cm，疼痛评分： 分。告知分娩相关知识及风险，指导呼吸法减轻疼痛，孕妇及家属理解，有阴道分娩信心。</td>
<td>测试</td>
</tr><tr>
<td style="position: absolute; left: 0px; width: 89.2px; background-color: white;">2015-07-13</td>
<td style="padding-left: 89.2px;">09:52</td>
<td>/</td>
<td></td>
<td></td>
<td>-1→0</td>
<td>薄</td>
<td>1cm</td>
<td>√</td>
<td></td>
<td>Ⅱ°</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>孕妇入产房待产，身高：23 cm，复测宫高： cm，腹围： cm，疼痛评分： 分。告知分娩相关知识及风险，指导呼吸法减轻疼痛，孕妇及家属理解，有阴道分娩信心。</td>
<td>测试</td>
</tr>
</tbody>
</table>
</div>
</body></html>
解决方案
其实这个功能可以使用easyUI里面的Data Grid功能里的Frozen Columns in DataGrid实现，这个功能项目可以固定左边第一排或左边第一与第二排栏位，可以上下滑动（右边资料同步），但往左边不会滑动；而右边的表格则是表头固定置顶，上下滑动表头固定，往左滑动会隐藏到左排后面
easyUI的Data Grid可以帮助你做很多事情，包括资料排序，查找，过滤等等
http://www.jeasyui.com/demo/m...
这篇关于javascript - 怎么实现一个固定头部和固定左边第一列的table的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
