表格表头固定,内容多时滚动内容

最新推荐文章于 2023-04-14 13:34:06 发布
最新推荐文章于 2023-04-14 13:34:06 发布
阅读量291 收藏
点赞数
原文链接：https://www.iteye.com/blog/redstarofsleep-1010569
版权

<html>  

    <head>  

        <style type="text/css">  

            * {  

                margin: 0;  

                padding: 0;  

            }  

              

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

            .all {  

                width: 100%;  

                border: 1px solid #b3adad;  

            }  

              

            /*表头在这个DIV内*/  

            .title {  

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

            }  

              

            /*表格样式*/  

            table {  

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

                border: 1px solid #b3adad;  

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

                table-layout:fixed;  

            }  

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

            table tr th {  

                border: 1px solid #b3adad;  

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

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

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

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

                white-space: nowrap;  

            }  

            /*单元格样式*/  

            table tr td {  

                border: 1px solid #b3adad;  

                overflow: hidden;  

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

                word-break: break-all;  

                text-overflow: ellipsis;  

                white-space: nowrap;  

            }  

              

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

            .content {  

                width: 100%;  

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

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

            }  

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

            .content div {  

                width: 500px;  /*与表头的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 rowspan='4'>Operate</td>  

                            <td>Date</td>  

                            <td>Acknowledge</td>  

                            <td>Other21</td>  

                            <td>Other22</td>  

                            <td>Other3</td>  

                        </tr>  

                        <tr>  

                            <td>Date</td>  

                            <td>Acknowledge</td>  

                            <td>Other31</td>  

                            <td>Other32</td>  

                            <td>Other3</td>  

                        </tr>  

                        <tr>  

                            <td>Date</td>  

                            <td>Acknowledge</td>  

                            <td>Other41</td>  

                            <td>Other42</td>  

                            <td>Other3</td>  

                        </tr>  

                        <tr>  

                            <td>2011-12-12 12: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>  

leoliuping
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 移动端固定表格的第一列，其余内容超出可以滚动
Yana5mu的博客
03-27 5121
这几天做项目，需要做表格，将第一列固定不动，其他的超出的内容可以滚动，网上查了很多办法，刚开始写的是第一列一个表格，其他内容一个表格。给其他内容设置滚动条。（内容随着后台一直添加，长短不一） 遇到的问题： 1、每行的内容不一样，让每个td的宽度不一样，出来的表格看起来很乱。 解决办法：给table设置 display:flex, tr td { flex: 1}。 随之而来的问题：多出...
实现table表格列头固定，内容超出滚动
qq_37100378的博客
09-18 1126
就直接贴代码了 里边用了vue的v-for循环数据可以忽略不计，主要是css样式* <table border="1" cellspacing="0" cellpadding="0" class="kcdata" height="500px"> <thead> <tr>...
表格表头固定 内容可以滚动（示例）
12-21
表格表头固定 内容可以滚动（示例）： 表格表头固定，内容可以滚动，前提是表格在一个div中
表头固定,内容可滚动表格的3种实现方法
唐策的博客
11-03 5954
一、表格总宽度自动，每列宽度设置统一用设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<div>包裹并设置该 <div> 的高度固定，高度溢出可滚动即可。两个表格的列宽用相同的<colgroup>固定列宽值，需要注意的是滚动条会占用一定的宽度，一般是：17px，所以在表头需要特别处理一下，不然表格就不能对齐了。大家看代码，最简单的办法是表头单独空一列和下面的表格滚动条对齐
HTML table标签固定高度，并且显示滚动条
DDD4V的博客
08-19 3930
关键设置 /*关键设置 tbody出现滚动条*/ 21 table tbody { 22 display: block; 23 height: 80px; 24 overflow-y: scroll; 25 } 26 27 table thead, 28 tbod.
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
效果图应当清晰地展示出固定表头和滚动内容的实际效果，以帮助理解代码实现的最终结果。 以上是对于JS实现table表格固定表头且表头随横向滚动而滚动相关知识点的总结和解析。希望对理解和实现类似效果有所帮助。...
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定...在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
jQuery实现表头固定表格内容滚动效果
11-02
在网页设计中，当表格数据过多时，为了保持良好的用户体验，常常需要实现表头固定而内容可滚动的效果。`jQuery`作为一个广泛使用的JavaScript库，提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何...
表格固定高度，加滚动条属性
QinLaoDeMaChu的博客
09-16 365
.
html表头固定 表体滚动
06-22
html表头固定 表体滚动,代码简单，通俗易懂
表头固定内容滚动，直接打开html即可运行
11-15
自己写的不同风格的表头固定内容滚动代码，直接压缩就可以看到效果，希望对后来者有用。
html ＜table＞ 表格 表头固定 内容滚动 代码拿去就能用
m0_61073617的博客
01-13 2459
table表头固定，内容滚动
weixin_44037153的博客
04-14 4100
第一种方法通过overflow属性实现，第二种方法通过position属性实现。
表头固定内容可滚动表格的3种实现方法
weixin_30565327的博客
12-14 1716
有时候，我们在开发前端页面过程中，可能会用到这种表格：表头固定不动，表格内容（<tbody>）需要竖直滚动。 像这样的： 还有这样的： 通过研究，我大致总结了以下三种实现办法供大家参考，如果有错误之处敬请指正，也欢迎拍砖！！ 一、表格总宽度自动，每列宽度设置统一用<colgroup>设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<...
html表头跟随滚动,table的表头固定--上下滚动表头固定，左右滚动跟随滚动
weixin_42506994的博客
06-07 2221
遇到这种固定表格的，我们一般都是写两个table，一个放thead，一个放tbody；如果表格内容少，我们只需要给两个table100%宽度就行，如果遇到表格内容很长的就比较棘手了；1.上面的table的父容器div样式：#fixedDiv {position: absolute;left: 0;right: 0;overflow: hidden;//这里hidden是用于隐藏滚动条}2.下面的...
html固定表头的滚动条,css实现固定表头带滚动条的table.html
weixin_36023930的博客
06-07 279
固定表头#table-container {border: 1px solid black;width: 316px;}table {width: 300px;}.table-header {padding-left: 10px;color: #0099FF;font-size: 1.3rem;height: 40px;text-align: center;}.table col {width: ...
vue element表格表头固定 内容上下滚动
最新发布
10-01
总结来说，实现Vue Element表格表头固定和内容上下滚动的方法是，在表格组件外部包裹一个固定高度的容器，并设置容器的样式为`overflow: auto;`，在表格组件中设置固定高度和表头`fixed`属性，最后根据需要对滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值