html table表头固定实现的两种方式

最新推荐文章于 2024-05-11 01:32:20 发布
最新推荐文章于 2024-05-11 01:32:20 发布
阅读量4.4k 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37942145/article/details/83114309
版权

实际项目需求，实例如下

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.table-head{padding-right:17px;color:#000;}
.table-body{width:100%; height:100px;overflow-y:scroll;}
.table-head table,.table-body table{width:100%;}
.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
.table-head table td,.table-body table td{word-wrap:break-word; word-break:normal;}
</style>
</head>

<body>
<div style="width: 100%;">
    <div class="table-head">

        <table>
            <tr align="center"  height="27">
            <th height="27" colspan="15" >测试案例1</th>
        </tr>
        </table>
    <table border="1" cellpadding="0" cellspacing="0">
        <colgroup>
         
       
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
             <col style="width: 100px;" />
               <col />
 
        </colgroup>
        <thead>
            <tr align="center" height="27">
            <th  rowspan="2" >序号</th>
             <th  rowspan="2" >日期</th>
             <th  rowspan="2" >时间</th>
            <th  rowspan="2" >时间</th>
            <th  rowspan="2" >时间</th>
            <th  rowspan="2" >时间</th>
            <th  rowspan="2" >时间</th>
            <th  rowspan="2" >时间</th>
            <th  rowspan="2" >时间</th>
            <th  colspan="4" >时间估</th>
            <th rowspan="2" >时间</th>
            <th  rowspan="2" >时间</th>
                
   
            </tr>
            <tr align="center" height="27">
                
            <th height="27" background="/public/images/th_bj.png" >A</th>
            <th height="27" background="/public/images/th_bj.png" >B</th>
            <th height="27" background="/public/images/th_bj.png" >C</th>
            <th height="27" background="/public/images/th_bj.png" >D</th>
            </tr>
        </thead>
    </table>
    </div>
    <div class="table-body">
    <table border="1" cellpadding="0" cellspacing="o">
        <colgroup>
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
            <col style="width: 100px;" />
             <col style="width: 100px;" />
               <col />
        </colgroup>
        <tbody>
            <tr align="center">
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td>
            </tr>
           <tr align="center">
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td>
            </tr>
           <tr align="center">
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td>
            </tr>
            <tr align="center">
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td>
            </tr>
            <tr align="center">
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td>
            </tr>
             <tr align="center">
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td>
            </tr>
             <tr align="center">
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td>
            </tr>
             <tr align="center">
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td>
            </tr> <tr align="center">
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td><td>我只是</td><td>1</td><td>我只是</td>
                <td>1</td><td>我只是</td><td>1</td>
            </tr>
        </tbody>
    </table>
    </div>
</div>
<div style="width: 100%; padding-top:30px ;">
<div class="table-head"> 
    <table>
            <tr align="center"  height="27">
            <th height="27" colspan="15" >测试案例2</th>
        </tr>
        </table>
    <table border="1" cellpadding="0" cellspacing="0">

        <thead>
            <tr align="center" height="27">
            <th width="100px" rowspan="2" >序号</th>
             <th width="100px" rowspan="2" >日期</th>
             <th width="100px" rowspan="2" >时间</th>
            <th width="100px" rowspan="2" >时间</th>
            </tr>
          
        </thead>
    </table>
    </div>
    
    <div class="table-body">
    <table border="1" cellpadding="0" cellspacing="o">
      
        <tbody>
            <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
         <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
            <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
            <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr><tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
            <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
            <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
            <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr><tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
            <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
            <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
            <tr align="center">
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                <td width="100px">1</td>
                <td width="100px">我只是</td>
                
            </tr>
        </tbody>
    </table>
    </div>
    </div>
</body>
</html>

杨宇sss
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table表身滑动，表头不动样式
qq_36939013的博客
09-27 938
.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;
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
实现Table表头和列固定
08-01
实现表头和列固定，并可行多表头，多列(左右都可以)，无错位
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
HTML table标签实现表头固定
最新发布
2301_78416672的博客
05-11 320
表头表头表头表头表头内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
HTML table表头固定
普罗旺斯
09-27 1316
【代码】HTML table表头固定。
HTML table固定表头
dgjvlz1669的博客
07-26 223
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐; 2.用两个table模拟,第一个作为thead,第二个作为tbody; 需要动态设置单元格宽度,基本上满足需求,但是在firefox中,...
asp.net html+table固定表头和左侧列.rar
08-20
在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...
两个table实现固定表头拖动时仅限表体移动
09-25
标题“两个table实现固定表头拖动时仅限表体移动”描述了一种利用两个表格来完成这一功能的技术。这个方法的关键在于将表头和表体分开，然后通过CSS定位来实现滚动行为的控制。 首先，我们需要理解这种方法的基本...
table表头及列固定
10-17
这种实现方式需要更复杂的jQuery代码来处理滚动事件、计算列宽以及同步两个表格。它也涉及对表格内容进行复制，以创建那个“固定列”表格。虽然这种方法相对复杂，但它可以提供良好的视觉效果，尤其是在有大量数据的...
HTML Table固定表头完美实现
03-16
这两种布局方式提供了更强大的控制力，可以轻松实现复杂布局。但需要注意的是，它们的浏览器兼容性可能不如传统的`position: fixed`方法。 5. **性能优化**：在使用JavaScript处理固定表头时，要注意性能问题。滚动...
HTML table表头固定（自己做项目使用的几种方法）
热门推荐
多毛大叔爱萝莉的博客
07-02 7万+
还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多文档。最后总结出几个不错的方法和插件。 一、使用css + js来实现表头固定 使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度） 项目demo css样式部分 主要是出现滚动条和定位th还有固定高度。 &amp;amp;amp;amp;amp;amp;l...
Html Table表头固定
一包大豫竹的博客
12-21 1万+
实现效果： 上代码： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;ξӗθCSSތԌ&lt;/title&gt; &lt;style&
如何固定html表格头部，用css样式即可实现，操作简便、代码简单
Z_B_L的博客
10-12 1027
如何固定html表格头部，用css样式即可实现，操作简便、代码简单
html Table实现表头固定
weixin_33788244的博客
01-18 217
点击看效果 <div class="wrapbox"> <div class="table-head"> <table> <thead> <th width="10%">合同号</th>...
HTML table 表头固定
05-05
要固定 HTML 表格的表头，可以使用 CSS 的 `position: sticky` 属性。这个属性可以让元素在滚动到某个位置时固定在页面上。具体实现步骤如下： 1. 设置表格的 `thead` 元素为固定定位： ```css thead { position:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值