【经典思维】table 表头固定，内容自由滚动

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

<html>

<head>

<style type="text/css">

* {

    margin: 0;

    padding: 0;

}

 

/*所有内容都在这个DIV内*/

.all {

    width: 100%;

    border: 1px solid #000000;

}

 

/*表头在这个DIV内*/

.title {

    width: 100%; /*这个宽度需要与下面的内容的DIV相等*/

    overflow-y: scroll;

}

 

/*表格样式*/

table {

    width: 100%; /*撑满上面定义的500像素*/

    border: 1px solid #FF00FF;

    border-collapse: collapse; /*边线与旁边的合并*/

    table-layout: fixed;

}

 

/*表头单元格(这里将表头单元格的样式设置成了和单元格一样,实际中可以改变)*/

table tr th {

    border: 1px solid #FF00FF;

    overflow: hidden; /*超出长度的内容不显示*/

    /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/

    word-break: break-all; /*字内断开*/

    text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/

    white-space: nowrap;

}

 

/*单元格样式*/

table tr td {

    border: 1px solid #FF00FF;

    overflow: hidden;

    /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/

    word-break: break-all;

    text-overflow: ellipsis;

    white-space: nowrap;

}

 

/*容纳表格内容的DIV,这个DIV上放置滚动条*/

.content {

    width: 100%;

    height: 100px; /*定一下高度,要不然就撑出来没滚动条了*/

    overflow: auto; /*总是显示滚动条*/

}

 

/*真正存放内容的DIV*/

.content div {

    width: 100%; /*与表头的DIV宽度相同*/

}

</style>

</head>

 

<body>

<div class="all">

<div class="title">

<table>

    <tr>

       <th style="width: 10%">Operate</th>

       <th style="width: 20%">Date</th>

       <th style="width: 25%">Acknowledge</th>

       <th style="width: 15%">Other1</th>

       <th style="width: 15%">Other2</th>

       <th>Other3</th>

    </tr>

</table>

</div>

 

<div class="content">

<div>

<table>

    <tr>

       <td style="width: 10%">Operate</td>

       <td style="width: 20%">Date</td>

       <td style="width: 25%">Acknowledge</td>

       <td style="width: 15%">Other1</td>

       <td style="width: 15%">Other2</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other21</td>

       <td>Other22</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other31</td>

       <td>Other32</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other41</td>

       <td>Other42</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other41</td>

       <td>Other42</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other41</td>

       <td>Other42</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other41</td>

       <td>Other42</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other41</td>

       <td>Other42</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other41</td>

       <td>Other42</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other41</td>

       <td>Other42</td>

       <td>Other3</td>

    </tr>

    <tr>

       <td>Operate</td>

       <td>Date</td>

       <td>Acknowledge</td>

       <td>Other41</td>

       <td>Other42</td>

       <td>Other3</td>

    </tr>

 

    <tr>

       <td>Operate</td>

       <td>2011-12-1212:22:34 9987</td>

       <td>Acknowledge</td>

       <td>Other51</td>

       <td>Other52</td>

       <!--每个td上都要加个title,鼠标放上去时显示全部内容,我这里偷懒就写了一个-->

       <td title="Other3hhhhhhhhhhhhhhhhhhhhhhhhaa">Other3hhhhhhhhhhhhhhhhhhhhhhhhaa</td>

    </tr>

</table>

</div>

</div>

</div>

</body>

</html>

 

forestsea
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下
table表头固定，内容滚动
weixin_44037153的博客
04-14 3896
第一种方法通过overflow属性实现，第二种方法通过position属性实现。
table表头固定只让内容滚动
2³
07-15 3640
table表格实现表头固定，只内容滚动。
表头固定内容可滚动表格的3种实现方法
weixin_30565327的博客
12-14 1706
有时候，我们在开发前端页面过程中，可能会用到这种表格：表头固定不动，表格内容（<tbody>）需要竖直滚动。 像这样的： 还有这样的： 通过研究，我大致总结了以下三种实现办法供大家参考，如果有错误之处敬请指正，也欢迎拍砖！！ 一、表格总宽度自动，每列宽度设置统一用<colgroup>设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<...
table 表体滚动， 表头、表尾固定
qq_38567182的博客
10-31 482
table 表体滚动， 表头、表尾固定。
element table头部固定，内容滚动
最新发布
weixin_49511142的博客
04-01 1117
思路：首先我们要给table表格套一层父元素，然后获取这个父元素的高度，同时获取表格的表头的高度以及分页的高度。然后用父元素的高度减去表头和分页的高度即是table表格的高度，然后再把这个高度赋值给。2.然后我又想会不会是数据过多，我先获取了dom，然后数据渲染后的dom我们高度不一致，里面进行监听，等数据回来后再获取dom，这样总可以了吧，但是事实总是残酷的，又失败了。3. 最后大家别忘了销毁监听器。
BootStrap的table表头固定tbody滚动的实例代码
09-01
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
jQuery实现表头固定表格内容滚动效果
11-02
在网页设计中，当表格数据过多时，为了保持良好的用户体验，常常需要实现表头固定而内容可滚动的效果。`jQuery`作为一个广泛使用的JavaScript库，提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何...
如何实现table表头固定但是tbody可以滚动【附源码实例】
赏樱看雪撸代码
12-06 3345
table表头固定，自定义tbody高度，tbody设置高度失效，tbody设置高度不生效，tr设置高度，tbody滚动条
表头固定,内容可滚动表格的3种实现方法
唐策的博客
11-03 5840
一、表格总宽度自动，每列宽度设置统一用设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<div>包裹并设置该 <div> 的高度固定，高度溢出可滚动即可。两个表格的列宽用相同的<colgroup>固定列宽值，需要注意的是滚动条会占用一定的宽度，一般是：17px，所以在表头需要特别处理一下，不然表格就不能对齐了。大家看代码，最简单的办法是表头单独空一列和下面的表格滚动条对齐
Table实现表头固定 内容滚动
weixin_30510153的博客
11-26 276
<div style="width: 800px;"> <div class="table-head"> <table> <colgroup> <col style="width: 80px;" /> <col /> ...
＜table＞ 固定表头，内容滚动
bamboolm的博客
11-10 712
固定表头，内容滚动
table表头固定，表格数据内容滚动
工作中学习，学习中进步
02-18 719
目的：方便运营人员查看第二屏的数据，能直观的查看数据对应关系 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table表头固定</title> <style> table{ border-collapse: collapse; bord
css实现table表头固定，主体tbody部分出现滚动条
笑到世界都狼狈的博客
04-02 2756
首先，这是原文链接：https://www.mybj123.com/667.html，作者也写的比较好，但是我在原文的基础上，也发挥了一下自己的头脑，做了一点补充。 下面是我结合作者的代码做了一些修改的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
table固定表头、固定列
RRRRRDong的博客
07-17 8338
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。 使用position:sticky来固定表头 html: <div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
table 表头固定
github_38186390的博客
09-27 1962
一。table 表头固定说明。我们将表头和表内容分成两个表格就可以解决该问题。 二。代码。 css代码：里面定死的宽高只是为啦方便看效果，实际中需要使用js计算出来。 * { box-sizing: border-box; } .table { border: 1px solid #efefef; ...
table表头固定内容滚动
06-09
如果想要实现表头固定内容滚动的效果，可以使用CSS中的position属性和JavaScript中的scroll事件来实现。具体的实现步骤如下： 1. 首先，将表格的表头和表格内容分别放入两个div中，并设置它们的class为"fixed-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

forestsea

你的打赏是我精心创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值