在HTML中创建带滚动条的table

最新推荐文章于 2025-08-03 12:46:35 发布
原创 最新推荐文章于 2025-08-03 12:46:35 发布 · 5.4k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#table #html #class #数据库 #firefox
#float
本文介绍了一种在不同浏览器中实现表格垂直滚动的兼容性方案。通过对比单一表格与双表格的方法，解决了Firefox与IE8之间的显示问题。采用双表格虽然存在对齐难点，但在两种浏览器下均能稳定工作。


                <div style="float:left;width:100%;">
                    <table class="life-table" style="border:4px solid #E78F28;" cellspacing="0">
                        <thead>
                        <tr>
                            <th class="life-title" width="35px"></th>
                            <th class="life-title" width="150px">9/2 周三</th>
                            <th class="life-title" width="150px">9/3 周四</th>
                            <th class="life-title" width="150px">9/4 周五</th>
                            <th class="life-title" width="13px"></th>
                        </tr>
                        </thead>
                       
                        <tbody style="overflow-y:scroll;overflow-x:hidden;height:100px;">
                        <tr>
                            <td class="life-title" height="22px">00:00</td>
                            <td align="center" style="background:red;color:white;">浏览网页</td>
                            <td align="center" style="background:yellow;">看书</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">01:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:green;color:white;">coding</td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">02:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:blue;color:white;">学英语</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">03:00</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                            <td align="center" style="background:green;color:white;">数据库</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">00:00</td>
                            <td align="center" style="background:red;color:white;">浏览网页</td>
                            <td align="center" style="background:yellow;">看书</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">01:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:green;color:white;">coding</td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">02:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:blue;color:white;">学英语</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">03:00</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                            <td align="center" style="background:green;color:white;">数据库</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

 

评：上述代码在Firefox里能work，但是在IE8不行。下面的代码使用两个表格，在Firefox和IE8中均正常。使用两个表格的缺点是，不容易将表头和内容对齐


                <div style="float:left;width:100%;height:auto;">
                    <table class="life-table" cellspacing="0" cellpadding="0">
                        <tr>
                            <th class="life-title" width="35px"></th>
                            <th class="life-title" width="150px">9/2 周三</th>
                            <th class="life-title" width="150px">9/3 周四</th>
                            <th class="life-title" width="150px">9/4 周五</th>
                            <td class="life-title" width="15px"></td>
                        </tr>
                    <tr><td colspan="5">
                    <div style="overflow-y:scroll;height:100px;">
                        <table cellspacing="0">                       
                        <tr>
                            <td class="life-title" height="22px">00:00</td>
                            <td align="center" style="background:red;color:white;">浏览网页</td>
                            <td align="center" style="background:yellow;">看书</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">01:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:green;color:white;">coding</td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">02:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:blue;color:white;">学英语</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">03:00</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                            <td align="center" style="background:green;color:white;">数据库</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">00:00</td>
                            <td align="center" style="background:red;color:white;">浏览网页</td>
                            <td align="center" style="background:yellow;">看书</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">01:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:green;color:white;">coding</td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">02:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:blue;color:white;">学英语</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">03:00</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                            <td align="center" style="background:green;color:white;">数据库</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td width="35px"></td>
                            <td width="150px"></td>
                            <td width="150px"></td>
                            <td width="150px"></td>
                        </tr>
                        </table>
                    </div>
                    </td></tr>
                    </table>
                </div>

 

告别默认丑样式！手把手教你定制Ant Design Table滚动条（附完整CSS代码）
最新发布
weixin_42522167的博客
04-23 112
本文详细介绍了如何深度定制Ant Design Table组件的滚动条样式，从基础CSS方案到高级技巧，包括隐藏滚动条保留功能、解决表头错位问题以及暗黑模式适配。提供完整的CSS代码示例，帮助开发者实现与设计稿完美匹配的表格样式，提升后台管理系统的视觉一致性。
html table表格设置滚动条
西凉的悲伤博客
08-24 2万+
table对tbody进行设置使其能够进行滚动。 效果如下： 代码如下： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表格滚动</title> <style> table,tbody { disp
HTML表格体滚动
dbeidouxingf的博客
08-22 1928
使用table-layout：fixed后。整个每一列的宽度由列所在表头确定，可以给表头th元素设置width，但是当单元格内内容超长时，设置的宽度就会有出入。可以给一个宽度较为固定的列不设置宽度，自适应从而保证其他元素宽度足够不变。使用后表格体会出现侧边的滚动条，但是表格头固定，可能会出现上下并不对齐的现象。原生的表格元素添加scroll并不会生效，需要改变表格的属性。
HTML页面table滚动条的实现
好久不见的流星
05-08 2万+
有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。
Html table 滚动条
小虎博客
07-04 1283
<table style="width: 100%; border-collapse: collapse; border-color: rgb(211, 214, 219); color: black;"><thead style="background-color: rgb(248, 248, 248);"><tr style="border-color: rgb(211, 214, 219);"><th style="width: 30px; text-alig
原生html table固定高度并显示滚动条
liyaodong1234的博客
01-31 1479
【代码】原生html table固定高度并显示滚动条。
HTML中的table加滚动条+修改样式
sinat_41746597的博客
09-07 2329
HTML中的table加滚动条 <table class="table"> <thead> <tr> <td>我是表头1</td> <td>我是表头2</td> <td>我是表头3</td> <td>我是表头4</td> </tr> </thead> <tbody>
html中table代表什么,html中的table详解
weixin_39680380的博客
06-10 3652
本篇文章主要介绍HTML中的table，感兴趣的朋友参考下，希望对大家有所帮助。普通表格，简单的HTML表格由table元素以及tr、td和th元素组成，其中tr是指表格行，td是指单元格，th定义表头。空单元格就直接不填即可，或者用。表头表头表头单元格1单元格32.带有边框的表格。border元素表示表格的边框,默认单位是px，cellspcing表示表格与表格之间的间距，cellpaddin...
CSS 实现 table 表头固定 tbody 显示垂直滚动条并自定义滚动条样式
zhang33565417的博客
05-10 3923
一、最终效果图 二、关键代码 html 代码： <div class="table_info"> <table border="0" cellspacing="0" cellpadding="0" style="width: 100%;"> <thead> <tr> <th>项目账号</th> <th>项目名称</th> ...
bootstrap table 固定table最底部的滚动条到屏幕底部
xiakekeali的博客
12-04 6964
在使用bootstrap表格时，之前想着说直接把外层的div添加滚动，这样也算是实现了效果，但是伤心的是我的表格里面有固定列，如果直接用表格外层的overflow-x: scroll的话滚动时固定列的效果就消失了，所以没有办法，必须得把她本身的表格滚动条固定到屏幕的底部（想放置的位置）， 之前的效果，必须拉倒表格最底部才能看到滚动条 实现以后的效果，冻结表格依然有效 作为一个小白，经历了好几个...
HTML table标签固定高度，并且显示滚动条
DDD4V的博客
08-19 4483
关键设置 /*关键设置 tbody出现滚动条*/ 21 table tbody { 22 display: block; 23 height: 80px; 24 overflow-y: scroll; 25 } 26 27 table thead, 28 tbod.
HTML如何给table添加滚动条
Changgo在IT路上的一路风景
03-25 1738
HTML如何给table添加滚动条 要给table添加滚动条其实很简单，主要是给table放到一个div里去，然后再设置div显示滚动条即可。示例代码如下所示：               000102030405    101112131515    202122232425    303132333435
html table滚动条 置顶,HTML页面如何实现table滚动条
weixin_36130963的博客
05-31 1569
HTML页面如何实现table滚动条发布时间：2020-10-26 11:40:02来源：亿速云阅读：139作者：小新小编给大家分享一下HTML页面如何实现table滚动条，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！table scrollbar & header fixed有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写...
html：table如何固定首行
Bombas的博客
04-26 5548
table固定首行，首行标题信息不会随滚动条滚动而消失
实现HTML表格两种滚动条形式
weixin_42581003的博客
08-03 1198
原生的滚动条虽然提供了基本的滚动功能，但是在样式和用户体验方面存在局限性。它们在不同的操作系统和浏览器之间可能会呈现出不同的视觉效果，这会影响到网页界面的一致性和美观度。此外，原生滚动条的大小和颜色通常是固定的，这在很多情况下并不能满足设计师对于界面风格的个性化需求。自定义滚动条样式则可以打破这些局限性，允许开发者根据网站的风格和品牌特色来设计滚动条，从而提升用户体验。自定义滚动条可以使用CSS伪元素来实现各种创意设计，包括但不限于改变滚动条的颜色、宽度、轨道、滑块等。
html 表格加滚动条
guoxiaohuivip的博客
02-22 1万+
思路： 1.表格放在Div中，设定Div的宽度和高度（不能用百分比），并设置纵向滚动条始终显示。 2.设定表格的宽度比Div小一个滚动条的宽度（如Div宽度为500，滚动条宽度为16，则表格的宽度应该设置为500-16=484）。 3.表格采用 thead,th标签            Header       1     Header       2
Bootstrap Table 超多列 使用滚动条
热门推荐
Peak Xin's Blog
06-25 4万+
Table显示滚动条，要先把table放到一个div中，控制div 属性overflow值为scroll &lt;div style="overflow:scroll;"&gt; ······ ······ &lt;/div&gt; Table设置最小长度 &lt;table class="table" style="min-width:1500px;"&gt; ······ ···..
Table表格的属性和表格里面的滚动条
smallwhite_paper的博客
08-24 776
一. 下面展示一些 内联代码片。 <div> <div class="table-head"> <table> <thead> <tr> <th>姓名</th> <th>小区</th> &lt
vue+elementui+table加上滚动条
qq_40693615的博客
12-19 1万+
<el-card> <el-scrollbar style="height:100%;width: 1540px"> <!-- 滚动条 --> <!-- 注意需要给 el-scrollbar 设置高度，判断是否滚动是看它的height判断的 --> <el-row style=...
HTML 实现表头固定且双向滚动条
iteye_19973的博客
08-15 913
网上找了许多种方法，可能学疏才浅，本人并没有实现，或者方法并不能满足大表单（双向滚动条）的需求；   1.大致思路：使用两个table，保证head和body宽度一致即可，以下例子，为完全展示body中每个单元格内容，故动态生成表头，根据已经生成的表单宽度去设定表头宽度；然后保证两个div 公用滚动条。2.实现单元格内容自动换行或者自动以...代替的关键点在于：设定单元格宽度   直接上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值