html table css 实现固定表头的办法

最新推荐文章于 2024-01-27 00:21:16 发布
最新推荐文章于 2024-01-27 00:21:16 发布
阅读量6.1k 收藏 2
点赞数 3
文章标签： html css 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerwener/article/details/72638273
版权

最近做到了要实现固定表头的一个数据列表table，在网上查了一些资料，总结出的办法，望大家提出建议或意见。

其原理大概如下：

将tbody用一个固定高度的div包起来，并使tbody的内容高度超过这div的高度，这样便会出现滚动条。同时因为要求表头固定，所以用另外一个table将表头写出来，但是要注意的是他的列宽要与table-content里的table列宽一致，这样就可以达到预期的效果。其实最主要的还是用到了colgroup和col标签，来格式化th和td的原理。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

     <style>
.main{width: 100%;}
table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    .table {
        width: 100%;
        border: 1px solid #dcdcdc;
    }
.table thead th,.table tbody td {
        padding: 5px 10px;
        vertical-align: middle;
        word-break:break-all;
        height: 30px;
        text-align: center;
        border: 1px solid #dcdcdc;
    }   
     .table thead th{
        font-size: 14px;
        font-weight: 500;
    }
    .table tbody td {
        height: 20px;
        border-bottom: none;
        
    }
    .table tbody tr:first-child td {
        border-top: none;
    }
    .table-content {
        height: 50px;
        overflow-x:hidden;
        overflow-y:auto;
        border-right: 1px solid #dcdcdc;
        border-bottom: 1px solid #dcdcdc;
    }
    .table-content .table {
        border: none;
    }
    .table-content tbody td {
        border-right: none;
    }
</style>
</head>
<body>

<div class="main">
<div class="tabBox">
<table class="table">
       <colgroup>
           <col width="100"></col>
           <col width="100"></col>
           <col width="100"></col>
           <col width="200"></col>
           <col width="200"></col>
           <col width="200"></col>
           <col width="100"></col>
           <col width="100"></col>
           <col width="100"></col>
           <col width="100"></col>
           <col width="200"></col>
           <col width="100"></col>
           <col width="*"></col>
       </colgroup>
       <thead>
           <tr>
               <th><input class="selectAll" type="checkbox" name="namecheck" value="" /></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>
   </table>
    <div class="table-content">
       <table class="table">
           <colgroup>
               <col width="100"></col>
           <col width="100"></col>
           <col width="100"></col>
           <col width="200"></col>
           <col width="200"></col>
           <col width="200"></col>
           <col width="100"></col>
           <col width="100"></col>
           <col width="100"></col>
           <col width="100"></col>
           <col width="200"></col>
           <col width="100"></col>
               <col width="*"></col>
           </colgroup>
           <tbody>
                     <tr>
                    <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>男男</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>男男</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>男男</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>
           </tbody>
       </table>
   </div>
</div>
</body>
</html>



kerwener
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css固定表头和列.html
01-11
css固定table表头和列，亲测可用
纯CSS实现Table固定表头和首列
热门推荐
Ghjkku的博客
09-15 8万+
HTML结构上，必须将 放在 子节点，且内部不要有其他 position 设置。Table固定表头和首列这种需求应该比较常见。以往的做法，需要写一大堆脚本，而现在，可以使用position:sticky轻松实现这个效果。
HTML中表格（table）的常规用法
最新发布
ljh666dee的博客
01-27 483
HTML中表格（table）的常规用法
CSS实现固定首列和表头
__猫玖__的博客
02-16 1829
首行首列固定
纯CSS固定table表头
海天鹰
05-01 319
【代码】纯CSS固定table表头。
最简单的纯css固定table的表头
yfx000的专栏
06-01 5049
页面table通常都需要做表头固定，参考了n种实现方式，最终还是选择了用纯css来做表头固定，只是因为方便，易于调试。
css固定table表头的实现代码可同时看到表头和表格底部
09-25
一次性将数据全部显示出来，页面就会出现滚动条，这样的话就不能同时看到表头信息和表格底部的数据记录,把表头固定可以解决此问题
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
主要给大家介绍了关于如何利用纯css实现table固定列与表头，中间横向滚动的相关资料，文中通过示例代码详细的给大家介绍了关于实现该效果的思路与方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们...
CSS教程,CSS固定表头的HTML表格
12-09
用CSS实现的固定表头的HTML表格。 曾经在项目中实现过一个固定表头的HTML表格，但使用了非常臃肿的代码，因为实际上是画了三个一样的表格。一个纯粹用HTML和CSS实现的固定表头的表格，其简化代码如下： <html ...
利用css3 translate完美实现表头固定效果
09-27
主要介绍了利用css3 translate完美实现表头固定效果的相关资料，文中通过示例代码介绍的很详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
纯CSS实现Table固定表头和首尾列以及表格边框设置
qq_39167934的博客
02-10 803
【代码】纯CSS实现Table固定表头和首尾列以及表格边框设置。
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
css实现table表头和列固定功能
sumimg的博客
12-15 448
项目需要用表格展示数据，要求表头和左边两列能够在滚动的时候固定，考虑到目前开源的table组件库冗余了太多项目不需要的功能，其次也是为了防止数据过多的时候渲染太慢，于是决定用html和css实现。根据MDN的描述，table-layout用于定义了用于布局表格单元格，行和列的算法，fixed属性值用于表示某一列的宽度仅由该列首行的单元格决定。属性，设置第一行和左右两列粘性定位，其中第二列的偏移量根据第一列的宽度决定，以此类推，如果有三列固定，需要知道前两列的宽度。高度要自适应（table默认支持）
前端页面Table CSS实现固定表头表首行和固定列拖动固定
小熊猫
05-11 2843
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。
HTML table表头固定（自己做项目使用的几种方法）
多毛大叔爱萝莉的博客
07-02 7万+
还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多文档。最后总结出几个不错的方法和插件。 一、使用css + js来实现表头固定 使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度） 项目demo css样式部分 主要是出现滚动条和定位th还有固定高度。 &amp;amp;amp;amp;amp;amp;l...
【css】纯css实现table表格固定表头，表内容滚动
hello world_
05-15 1万+
今天在写公司项目的时候，遇到了一个比较xx的问题，现公司的项目使用的是 vue2.0 和 element-ui 搭建的。 那么提到 element-ui 大家都知道，他最实用的一个组件就是表格了，简直是后台管理项目必备选项。 但是现公司的产品和 UI 简直丧心病狂，非让我自己用原生标签DIY，那没办法，只好 coding 了。 但是 coding 的过程中，有个需求是要表头固定，表内容超出滚...
HTML&CSS Table元素详细解说
weixin_30381793的博客
03-09 180
1.预热 css样式多如牛毛，我不可能一个一个去讲，那样好像背字典一样，我相信你们也不喜欢这样的方式。所以，我会在实战中慢慢和你讲解，然后，你记住一些重要的css属性就可以了。关键是，你要学会去查资料，最好的查资料方法，不是那种去W3C School上，一页一页看过去，那样的话不知道要看到什么时候，而是应该去看一些网页的源码，看看他们的网页是怎么做起来的，用了哪些css属性？这里面，肯定...
每日知识总结
m0_73801853的博客
09-19 287
thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody。每个表格均有若干行（由`tr`标签定义），每行被分割为若干单元格（由`td `标签定义）。**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。现在，用于显示、展示数据。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。
table表身滑动，表头不动样式
qq_36939013的博客
09-27 818
.toolTipx{ display: flex; flex-direction: column; background: #fff; color: #6c6c6c; max-height: 300px; width: 300px; .head-box { width: 300px; padding-right: 5px; background: #dee0ee; } .toolTip-title { color: #32c5ff;
css实现固定table表格
06-09
要实现固定表格，可以使用CSS中的position和overflow属性，具体步骤如下： 1. 给表格外层容器div设置固定高度和宽度，overflow属性设置为auto或scroll，这样就会出现滚动条。 2. 将表格放在容器div内，并设置表格的宽度为100%。 3. 给表格的thead和tbody分别设置position属性为sticky，top属性为0，这样表头就能固定在页面顶部。 4. 如果表格有左侧固定列，可以将左侧列单独放在一个table中，然后设置这个table的position属性为absolute，left属性为0，这样左侧列就能固定在页面左侧。 CSS代码示例如下： ``` .table-container { width: 500px; height: 300px; overflow: auto; } table { width: 100%; } thead th, tbody td { position: sticky; top: 0; } .left-column { position: absolute; left: 0; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值