实现table表头固定 内容滚动效果

最新推荐文章于 2024-06-28 14:21:30 发布
最新推荐文章于 2024-06-28 14:21:30 发布
阅读量7.2k 收藏 2
点赞数
分类专栏： Html/Css/JavaScript 文章标签： table表头不滚动
  1. <html>  
  2.     <head>  
  3.     <style type="text/css">  
  4.         /*所有内容都在这个DIV内*/  
  5.         div.all {  
  6.             border: 3px solid #FF00FF;  
  7.             width: 80%; /*这个宽度可根据实际需要改变*/  
  8.             clear: right;  
  9.         }  
  10.           
  11.         /*表头在这个DIV内*/  
  12.         div.title {  
  13.             width: 100%;  
  14.         }  
  15.         /*内容在这个DIV内*/  
  16.         div.content {  
  17.             width: 100%;  
  18.             overflow: scroll;  /*总是显示滚动条*/  
  19.             overflow-x: hidden; /*去掉横向滚动条*/  
  20.             height: 100px;  
  21.         }  
  22.         div.title_left {  
  23.             float: left;  
  24.             margin-right: 17px;  
  25.         }  
  26.         div.content_left {  
  27.             float: left;  
  28.         }  
  29.           
  30.         .main_table {  
  31.             width: 100%;  
  32.             border: 1px solid #FF00FF;  
  33.             border-collapse: collapse;  /*边线与旁边的合并*/    
  34.             table-layout:fixed;  
  35.         }  
  36.         .main_table tr th {    
  37.             border: 1px solid #FF00FF;    
  38.             overflow: hidden;  /*超出长度的内容不显示*/    
  39.             /*word-wrap: break-word;  内容将在边界内换行,这里显示省略号,所以不需要了*/    
  40.             word-break: break-all;  /*字内断开*/    
  41.             text-overflow: ellipsis;  /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/    
  42.             white-space: nowrap;    
  43.         }    
  44.         /*单元格样式*/    
  45.         .main_table tr td {    
  46.             border: 1px solid #FF00FF;    
  47.             overflow: hidden;    
  48.             /*word-wrap: break-word;  内容将在边界内换行,这里显示省略号,所以不需要了*/    
  49.             word-break: break-all;    
  50.             text-overflow: ellipsis;    
  51.             white-space: nowrap;    
  52.         }    
  53.     </style>  
  54.     </head>  
  55.     <body>  
  56.         <div class="all">  
  57.             <div class="title">  
  58.                 <div class="title_left">  
  59.                 <table class="main_table">  
  60.                     <tr>  
  61.                         <th>aaa</th><th style="width:30%">aaa</th><th>ccc</th><th>bbb</th>  
  62.                     </tr>  
  63.                 </table>  
  64.                 </div>  
  65.             </div>  
  66.             <div class="content">  
  67.                 <div class="content_left">  
  68.                 <table class="main_table">  
  69.                     <tr>  
  70.                         <td>aaa</td><td style="width:30%">aaa</td><td>ccc</td><td>bbb</td>  
  71.                     </tr>  
  72.                     <tr>  
  73.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  74.                     </tr>  
  75.                     <tr>  
  76.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  77.                     </tr>  
  78.                     <tr>  
  79.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  80.                     </tr>  
  81.                     <tr>  
  82.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  83.                     </tr>  
  84.                     <tr>  
  85.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  86.                     </tr>  
  87.                     <tr>  
  88.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  89.                     </tr>  
  90.                     <tr>  
  91.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  92.                     </tr>  
  93.                     <tr>  
  94.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  95.                     </tr>  
  96.                     <tr>  
  97.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  98.                     </tr>  
  99.                     <tr>  
  100.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  101.                     </tr>  
  102.                     <tr>  
  103.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  104.                     </tr>  
  105.                     <tr>  
  106.                         <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>  
  107.                     </tr>  
  108.                 </table>  
  109.                 </div>  
  110.             </div>  
  111.         </div>  
  112.     </body>  
  113. </html> 
gwpJava
关注
专栏目录
一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
效果图应当清晰地展示出固定表头和滚动内容的实际效果，以帮助理解代码实现的最终结果。 以上是对于JS实现table表格固定表头且表头随横向滚动而滚动相关知识点的总结和解析。希望对理解和实现类似效果有所帮助。...
table表头固定，内容滚动
qq_44869043的博客
06-16 4064
最近接到一个需求，要thead表头固定，tbody内容实现滚动。 简单，给tbody加高度就行了。 什么？！竟然不行失败了！！ 既然无法限制tbody本身的高度，那就给它套一个div，限制div的高度，让tbody在div里面滚就好了。 但是！！table里面，不能在tbody外面套div！浏览器无法解析！会变成这样： 哎呀，这也不行那也不行，到底要怎么搞？ 找了别人的代码，好家伙！可以用两个table来实现这个功能。 第一个table管理thead，第二个table管理tbody，再用div去包裹第二
el-table表格通过vue-seamless-scroll实现表格滚动(html + Vue + Element-UI)
最新发布
weixin_42597632的博客
06-28 1366
el-table表格滚动可以通过定义两个table实现，第一个table展示标题，第二个table展示滚动内容。把内容放在vue-seamless-scroll组件中即可。
table表头固定，内容出滚动条。
ma_hao99的博客
12-26 500
表格固定。内容可以滚动（已截图）。 <div class="m-table-scroll "> <table class="m-table table-bordered is-fixed"> <thead> <tr> <th class="thead">标题</th>...
table表头固定，内容滚动条，table滚动条对齐
qq_37167086的博客
03-06 883
<template> <table> <thead> <tr> <th v-for="(item,index) in 10" :key="index">表头</th> </tr> </thead> <tbody> <tr v-f...
Table的思索(二):表头固定而内容滚动的表格
热门推荐
甘焕的博客
08-03 2万+
产品要求表格的表头固定，而内容在超出table的高度后，还能自由滚动，难度较高，本文尝试了几种常用方法，但都经历了失败，最后给出了一种可行的解决方案。
html Table 表头固定的实现
09-22
为解决这个问题，就需要实现一个固定表头的效果，即无论表格如何滚动，表头始终固定在页面的顶部。 要实现这个效果，有几种常用的方法，主要包括使用CSS定位和JavaScript。而根据提供的文件内容，本文介绍了一种...
jQuery实现表头固定表格内容滚动效果
11-02
在网页设计中，当表格数据过多...总之，通过`jQuery`实现表头固定表格内容滚动效果，可以提升用户在浏览大量数据时的体验。在实际应用中，可以根据项目需求对上述代码进行调整和优化，以达到最佳的视觉效果和性能表现。
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
本篇文章主要探讨如何利用纯CSS实现table固定列与表头，同时在中间部分添加横向滚动条，以确保用户体验。 首先，我们面临的问题是表格内容因列数过多而产生换行，这影响了视觉效果。为了解决这个问题，可以使用CSS...
BootStrap的table表头固定tbody滚动的实例代码
09-01
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
Html中Table表头固定内容滚动以及checkbox右对齐
03-16
制作的样式中要求table表头固定，内容滚动，同时checkbox右对齐，支持全选
纯CSS实现表头固定表格滚动条效果
12-24
纯CSS实现表头固定表格滚动条效果，所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔
＜table＞ 固定表头，内容滚动
bamboolm的博客
11-10 746
固定表头，内容滚动
table表格自动循环滚动
LIUupup_的博客
11-27 1109
实现效果：自动循环滚动局部引入或全局引入后，用组件包住要滚动的表格，并将表格数据传进去。参数：detailData是表格数据数组，classOptionThree是滚动的参数，这个实现效果是表头也会跟着滚动，要想表头不滚动很简单，利用两个表格组件，1. 需要滚动的表格去掉表头，用组件包着，2. 将另一个表格放在组件外边，只显示表格标题。这个组件有个缺陷：数据更新的时候，dom却不会更新。为了解决这个问题，可以利用v-if的强制刷新。在数据有更新时先将设为false,过100毫秒再设为true。
固定table表头位置，内容滚动
m0_51707906的博客
09-03 213
在table里固定高度 height=“200”
纯css实现table的表头固定tbody内容显示垂直滚动条
ion_L的博客
08-27 1767
最近在做项目是经常用到table表格来做数据统计，数据少时还好，但是数据多就会导致整个页面看起来乱，用户体验不好，为了使得用户体验更好，所以就会为table的内容上显示滚动条，这样即使再多的数据也不怕因为过多导致页面显示难看。 转自： https://www.mybj123.com/667.html 第一种css方法 <table width="80%" border="1"> ...
html ＜table＞ 表格 表头固定 内容滚动 代码拿去就能用
m0_61073617的博客
01-13 2484
table表头固定内容滚动
06-09
如果想要实现表头固定内容滚动的效果，可以使用CSS中的position属性和JavaScript中的scroll事件来实现。具体的实现步骤如下： 1. 首先，将表格的表头和表格内容分别放入两个div中，并设置它们的class为"fixed-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值