有一个页面要放在手机上浏览。
这个页面是一个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>第一行使用一个table固定，但是隐藏；
左侧列使用一个table固定，但是隐藏；
滚动部分使用table(包含第一行和第一列)；
当table相应拖动事件时；table.offset.left>0 或 table.offset.top>0
显示相应固定的div（第一行使用一个table固定，左侧列使用一个table固定）
屏蔽滚动部分的table的浏览器事件，使table在SwipeLeft || SwipeRight 只横向滚动，SwipeTop || SwipeDown的时候只上下滚动...代码量预估好大...
缺点：
列宽和行高；需要指定；当然如果第一列或者第一行可以取表格的第一行和第一列的宽高和分布；这样可以响应式了；...代码量预估更大...
这个建议直接用div嵌套自己实现一个结构吧，直接用table恐怕是不行的
使用div的一个实现
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
body{
margin:50px;
}
.col{
display: inline-block;
border-right:0px solid #cccccc;
border-left:1px solid #cccccc;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
margin-left:0px;
margin-right:-4px;
width:100px;
height:50px;
box-sizing: border-box;
background-color: #ffffff;
color:#000000;
text-align: center;
line-height: 50px;
}
.header .col:last-child{
border:1px solid #cccccc;
}
.row .col:last-child{
border:1px solid #cccccc;
}
.headercol{
background-color: #0E2D5F;
color:white;
font-size: 17px;
text-align: center;
}
.fixedcol{
background-color: #1A68A2;
color:white;
font-size: 17px;
text-align: center;
}
.mytable_fixed{
overflow: hidden;
border:1px solid #cccccc;
}
.mytable_fixedHeaderColumn,.mytable_header_left,.mytable_fixedColumn{
float:left;
overflow: hidden;
}
.mytable_conentent{
float:left;
overflow: auto;
}
.mytable_header{
overflow:hidden;
box-sizing: border-box;
}
</style>
</head>
<body >
<div class="mytable_fixed" style="width:800px;height:450px;">
<div class="mytable_header" style="width:100%;height:50px;background-color: grey;border-bottom: 1px solid #cccccc;">
<div class="mytable_fixedHeaderColumn" style="width:200px;height:100%;">
<div class="col headercol" style="">column1</div>
<div class="col headercol" style="">column2</div>
</div>
<div class="mytable_header_left" style="width:600px;height:100%;background-color: #1e83c9;">
<div style="width:700px;">
<div class="col headercol" style="">column3</div>
<div class="col headercol" style="">column4</div>
<div class="col headercol" style="">column5</div>
<div class="col headercol" style="">column6</div>
<div class="col headercol" style="">column7</div>
<div class="col headercol" style="">column8</div>
<div class="col headercol" style="">column9</div>
</div>
</div>
</div>
<div class="mytable_container" style="width:900px;height:400px;border-bottom: 1px solid #cccccc;box-sizing: border-box">
<div class="mytable_fixedColumn" style="width:200px;height:400px;background-color: #00a23f;">
<!--固定2列的行展示-->
<div class="myfixedrow">
<div class="col fixedcol" style="">row1*column1</div>
<div class="col fixedcol" style="">row1*column2</div>
</div>
<div class="myfixedrow">
<div class="col fixedcol" style="">row2*column1</div>
<div class="col fixedcol" style="">row2*column2</div>
</div>
<div class="myfixedrow">
<div class="col fixedcol" style="">row3*column1</div>
<div class="col fixedcol" style="">row3*column2</div>
</div>
<div class="myfixedrow">
<div class="col fixedcol" style="">row4*column1</div>
<div class="col fixedcol" style="">row4*column2</div>
</div>
<div class="myfixedrow">
<div class="col fixedcol" style="">row5*column1</div>
<div class="col fixedcol" style="">row5*column2</div>
</div>
<div class="myfixedrow">
<div class="col fixedcol" style="">row6*column1</div>
<div class="col fixedcol" style="">row6*column2</div>
</div>
<div class="myfixedrow">
<div class="col fixedcol" style="">row7*column1</div>
<div class="col fixedcol" style="">row7*column2</div>
</div>
<div class="myfixedrow">
<div class="col fixedcol" style="">row8*column1</div>
<div class="col fixedcol" style="">row8*column2</div>
</div>
<div class="myfixedrow">
<div class="col fixedcol" style="">row9*column1</div>
<div class="col fixedcol" style="">row9*column2</div>
</div>
</div>
<div class="mytable_conentent" style="width:600px;height:400px;background-color: #1e83c9;">
<!--非固定列数据-->
<div style="width:700px;">
<div class="myrow" >
<div class="col" style="">row1*col3</div>
<div class="col" style="">row1*col4</div>
<div class="col" style="">row1*col5</div>
<div class="col" style="">row1*col6</div>
<div class="col" style="">row1*col7</div>
<div class="col" style="">row1*col8</div>
<div class="col" style="">row1*col9</div>
</div>
<div class="myrow" >
<div class="col" style="">row2*col3</div>
<div class="col" style="">row2*col4</div>
<div class="col" style="">row2*col5</div>
<div class="col" style="">row2*col6</div>
<div class="col" style="">row2*col7</div>
<div class="col" style="">row2*col8</div>
<div class="col" style="">row2*col9</div>
</div>
<div class="myrow" >
<div class="col" style="">row3*col3</div>
<div class="col" style="">row3*col4</div>
<div class="col" style="">row3*col5</div>
<div class="col" style="">row3*col6</div>
<div class="col" style="">row3*col7</div>
<div class="col" style="">row3*col8</div>
<div class="col" style="">row3*col9</div>
</div>
<div class="myrow" >
<div class="col" style="">row4*col3</div>
<div class="col" style="">row4*col4</div>
<div class="col" style="">row4*col5</div>
<div class="col" style="">row4*col6</div>
<div class="col" style="">row4*col7</div>
<div class="col" style="">row4*col8</div>
<div class="col" style="">row4*col9</div>
</div>
<div class="myrow" >
<div class="col" style="">row5*col3</div>
<div class="col" style="">row5*col4</div>
<div class="col" style="">row5*col5</div>
<div class="col" style="">row5*col6</div>
<div class="col" style="">row5*col7</div>
<div class="col" style="">row5*col8</div>
<div class="col" style="">row5*col9</div>
</div>
<div class="myrow" >
<div class="col" style="">row6*col3</div>
<div class="col" style="">row6*col4</div>
<div class="col" style="">row6*col5</div>
<div class="col" style="">row6*col6</div>
<div class="col" style="">row6*col7</div>
<div class="col" style="">row6*col8</div>
<div class="col" style="">row6*col9</div>
</div>
<div class="myrow" >
<div class="col" style="">row7*col3</div>
<div class="col" style="">row7*col4</div>
<div class="col" style="">row7*col5</div>
<div class="col" style="">row7*col6</div>
<div class="col" style="">row7*col7</div>
<div class="col" style="">row7*col8</div>
<div class="col" style="">row7*col9</div>
</div>
<div class="myrow" >
<div class="col" style="">row8*col3</div>
<div class="col" style="">row8*col4</div>
<div class="col" style="">row8*col5</div>
<div class="col" style="">row8*col6</div>
<div class="col" style="">row8*col7</div>
<div class="col" style="">row8*col8</div>
<div class="col" style="">row8*col9</div>
</div>
<div class="myrow" >
<div class="col" style="">row9*col3</div>
<div class="col" style="">row9*col4</div>
<div class="col" style="">row9*col5</div>
<div class="col" style="">row9*col6</div>
<div class="col " style="">row9*col7</div>
<div class="col " style="">row9*col8</div>
<div class="col " style="">row9*col9</div>
</div>
</div>
</div>
</div>
</div>
<script>
var mytable_conentent_Dom=document.getElementsByClassName("mytable_conentent")[0];
var mytable_fixedColumn_Dom=document.getElementsByClassName("mytable_fixedColumn")[0];
var mytable_header_left_Dom=document.getElementsByClassName("mytable_header_left")[0];
mytable_conentent_Dom.addEventListener("scroll",function(event){
var target=event.target;
mytable_fixedColumn_Dom.scrollTop=target.scrollTop;
mytable_header_left_Dom.scrollLeft=target.scrollLeft;
},false);
</script>
</body>
</html>这种需求使用简单的样式已经无法实现了，推荐一个插件吧：FixedHeaderTable，如果不实用 jQuery 的话可以参考一下实现方式。
怪怪的，第一列固定，滑动列表的时候只有只有后边的列动，那数据对么？
就你这个要求，把第一列和头部拆掉，然后里边放table，没有头部就可以了。
https://.com/a/1190000004713875
固定表头。
这种需求单纯用table很难实现。建议还是使用div模拟吧。