怎么实现一个固定头部和固定左边第一列的table

发布于
2016-05-31

有一个页面要放在手机上浏览。
这个页面是一个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>

html css javascript

阅读 22.2k

8 个回答

MAXMAS

✓ 已被采纳

其实这个功能可以使用easyUI里面的Data Grid功能里的Frozen Columns in DataGrid实现，这个功能项目可以固定左边第一排或左边第一与第二排栏位，可以上下滑动（右边资料同步），但往左边不会滑动；而右边的表格则是表头固定置顶，上下滑动表头固定，往左滑动会隐藏到左排后面

easyUI的Data Grid可以帮助你做很多事情，包括资料排序，查找，过滤等等

http://www.jeasyui.com/demo/m...

kikong

19.1k21320

发布于
2016-06-01

使用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>

SevenOutman

3.2k31225

发布于
2016-05-31

这个建议直接用div嵌套自己实现一个结构吧，直接用table恐怕是不行的

cool_zjy

5.6k3723

发布于
2016-05-31

这种需求使用简单的样式已经无法实现了，推荐一个插件吧：FixedHeaderTable，如果不实用 jQuery 的话可以参考一下实现方式。

慕少艾

3.5k269

发布于
2016-05-31

https://segmentfault.com/a/1190000004713875
固定表头。
这种需求单纯用table很难实现。建议还是使用div模拟吧。

G_Koala_C

5.1k544132

发布于
2016-06-01

怪怪的，第一列固定，滑动列表的时候只有只有后边的列动，那数据对么？
就你这个要求，把第一列和头部拆掉，然后里边放table，没有头部就可以了。

golden_freeman_china

1.8k1211

发布于
2016-06-03

更新于
2016-06-03

第一行使用一个table固定，但是隐藏；
左侧列使用一个table固定，但是隐藏；
滚动部分使用table(包含第一行和第一列)；

当table相应拖动事件时；table.offset.left>0 或 table.offset.top>0
显示相应固定的div（第一行使用一个table固定，左侧列使用一个table固定）
屏蔽滚动部分的table的浏览器事件，使table在SwipeLeft || SwipeRight 只横向滚动，SwipeTop || SwipeDown的时候只上下滚动...代码量预估好大...

缺点：
列宽和行高；需要指定；当然如果第一列或者第一行可以取表格的第一行和第一列的宽高和分布；这样可以响应式了；...代码量预估更大...

手机用户3046

发布于
2020-07-23

新手上路，请多包涵

楼主有没有解决问题呀，贴出来分享呀，谢谢

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

怎么实现一个固定头部和固定左边第一列的table

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何自定义设置虚线边框的样式？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？