表头固定，表的主体设置滚动条，同时解决错位问题

nanchen2251 发布于2019-04-23 13:11 / 3114人阅读

摘要：项目中遇到的问题，需要表头固定，给表体设置滚动条，搜了很多种方法，也研究了一下。表头放在中，表体放在中，给设置固定高度，加样式，这样在数据多的时候会出现滚动条，数据少的时候滚动条会消失。

项目中遇到的问题，需要表头固定，给表体设置滚动条，搜了很多种方法，bootstrap table也研究了一下。

下面是我们使用的方法。

表头放在div1中，表体放在div2中，给div2设置固定高度，加样式overflow:auto，这样在数据多的时候会出现滚动条，数据少的时候滚动条会消失。

如果通过bootstrap给div2加类pre-scrollable，会存在一个问题，如果数据少的时候，滚动条还是会存在。

还有一个问题，因为滚动条的存在，表头和表体会出现错位：

　　解决方法1：通过colgroup或者css或者js，设置表头中列的宽度和表体中对应列的宽度为相同的固定值（像素值，百分比不行），最后一列不设置，最后一列宽度会根据有无滚动条而自适应。但是还有个问题，如果窗口缩小，当窗口宽度小于除了最后一列的前面列的宽度之和，那么还是会出现错位。这种方法最好用于给div1和div2设置固定宽度（像素值）的情况下。

　　解决方法2：使用js，根据表主体第一行中每列的宽度，设置表头中每列的宽度，最后一列不设置，最后一列宽度会根据有无滚动条自适应。这种方法即使再怎么变化窗口大小，都能保证不错位（页面加载完成设置一下列宽度，window.onresize设置一下列宽度）。

        .warning_table_wrapper_head{
            width:1040px;
            height:50px;
            margin-left:30px;
            margin-top:20px;
        }
        .warning_table_wrapper_body{
            width:1040px;
            height:226px;
            margin-left:30px;
            overflow:auto;
        }

 　　　　<div class="warning_table_wrapper_head">
            <table class="table table-bordered">
                <colgroup>
                    <col width="51">
                    <col width="142">
                    <col width="160">
                    <col width="258">
                    <col width="80">
                    <col width="66">
                    <col width="100">
                    <col width="100">
                colgroup>
                <thead>
                <tr>
                    <th>序号th>
                    <th>物资编码th>
                    <th>物资名称th>
                    <th>型号th>
                    <th>计量单位th>
                    <th>库存量th>
                    <th>最小安全库存th>
                    <th>最大安全库存th>
                    <th>缺口数量th>
                tr>
                thead>
            table>
        div>
        <div class="warning_table_wrapper_body">
            <table class="table table-bordered">
                <colgroup>
                    <col width="51">
                    <col width="142">
                    <col width="160">
                    <col width="258">
                    <col width="80">
                    <col width="66">
                    <col width="100">
                    <col width="100">
                colgroup>
                <tbody>
                <tr>
                    <td>01td>
                    <td>C-02-01-01-001td>
                    <td>分合闸按钮td>
                    <td>C1KR输入输出220VAC 50HZ KVAtd>
                    <td>个td>
                    <td>10td>
                    <td>12td>
                    <td>18td>
                    <td>2td>
                tr>
                tbody>
            table>
        div>

idc机房托管私有云固定表头表格固定表头固定表头html asp 表头固定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1556.html

今天，你的浏览器 “滚动” 了吗？

摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。今天，你的浏览器滚动了吗？序在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...

leo108 2019-08-21 11:51 评论0 收藏0
今天，你的浏览器 “滚动” 了吗？

摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。今天，你的浏览器滚动了吗？序在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...

ad6623 2019-08-29 13:09 评论0 收藏0
bootstrap-table实现表头固定以及列固定

摘要：之前使用写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一引入和引入之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研...

B0B0 2019-08-23 15:42 评论0 收藏0
解决滚动条突然出现导致的页面错位问题

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。　　有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下：　　　　先来复习一下ov...

617035918 2019-04-23 10:22 评论0 收藏0
解决滚动条突然出现导致的页面错位问题

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下：先来复习一下overflow的...

timger 2019-04-22 17:02 评论0 收藏0