给table添加横向或者纵向滚动条

最新推荐文章于 2024-07-09 17:01:29 发布
最新推荐文章于 2024-07-09 17:01:29 发布
阅读量4.9k 收藏 9
点赞数 1
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoyifei01/article/details/130197933
版权
为HTML表格添加滚动条的方法是将table放入div中，并通过CSS设置div的overflow属性为auto，指定高度和宽度以触发滚动条。当div尺寸小于table时，滚动条会显示出来，允许用户查看超出可视区域的内容。
摘要由CSDN通过智能技术生成

要给table添加滚动条其实很简单，主要是给table放到一个div里去，然后再设置div显示滚动条即可。示例代码如下所示：

 <!--div比table大小要小才会显示-->
 <div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;">
    <table id="table" border="1" align="center" width="300px" height="200px">
  <tbody>
  </tbody>
 </table>
  </body>
  </div>

zhaoyifei01
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview-Table组件横向滚动纵向滚动到指定位置
liuhao9999的博客
10-23 344
【代码】iview-Table组件横向滚动到规定位置。
layui 实现table翻页滚动条位置保持不变的例子
10-16
然而，在实际应用中，开发者可能会遇到一些小问题，比如在使用layui table进行数据分页时，滚动条的位置在翻页后会自动复位，这会破坏用户的浏览连续性，降低使用体验。为了解决这个问题，我们可以自定义一些...
Table固定指定列进行横向滚动(可拓展)
05-29
根据不同需求固定指定列进行横向滚动操作 提供有Index.html，Index.js文件 Index.js可进行拓展(固定指定行进行垂直滚动操作)
table设置表格有滚动条
weixin_34038652的博客
06-16 425
table 设置表格有滚动条。 少说多做，代码中有注释： 1 &lt;!DOCTYPE HTML&gt; 2 &lt;html&gt; 3 4 &lt;head&gt; 5 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 6 &
解决el-table表格没有横向滚动条
最新发布
weixin_49352307的博客
07-09 845
解决方法:每个column 中添加。表头数据过多,需要添加横向滚动条。
锁定表列
grace_yan的专栏
07-03 716
锁定表格栏位范例网页BODY {    FONT: 12px 细明体; CURSOR: default}TD {    FONT: 12px 细明体; CURSOR: default}.title {    BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px;
HTML如何给table添加滚动条
lchina1314的专栏
04-08 4111
要给table添加滚动条其实很简单，主要是给table放到一个div里去，然后再设置div显示滚动条即可。示例代码如下所示： &lt;!--div比table大小要小才会显示--&gt; &lt;div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;"&gt; &lt;table i...
table加滚动条
a1327524551的博客
11-06 1614
记录一下，老项目会用到。很多前端需要手写。 CSS: .tableScroll{ // 滚动部分 -webkit-overflow-scrolling: touch; overflow-x: scroll; white-space: nowrap; } HTML: <div class="row tableScroll"> <table cellspacing="0" cellpadding="0" class="table table-bo..
解决layui数据表格table的横向滚动条显示问题
10-16
根据fly社区给出的解释，横向滚动条出现的原因主要是因为数据表格的渲染有时会在浏览器的纵向滚动条出现之前完成。在这种情况下，浏览器会强制减少滚动条宽度的差，一般约为17px，从而导致横向滚动条的出现。这个...
div和table横向和纵向滚动条问题
09-20
同时，为了避免与表格内部的纵向滚动条冲突，`div`的`overflow-y`属性设置为`hidden`。此外，需要设置`div`的固定宽度，例如`1000px`，确保在`table`宽度超出时触发横向滚动。 然而，直接设置`table`的`width`属性...
HTML页面table滚动条的实现
好久不见的流星
05-08 2万+
有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。
el-table 横向滚动条固定在可视窗口底部
s_156的博客
06-30 6961
有一个需求,当的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。
table表格 新增顶部滚动条el-table(elment-ui), Table(iview)
qq_45331969的博客
05-20 2660
需求：增加顶部滚动条，方便查看表格里面隐藏在后面的数据 1. el-table(elment-ui) 的实现方法 table表格上面添加一个div,外层设置为100%，内层div(内容区域)设置为table内容宽度 <!-- 顶部滚动条 --> <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrol
table给tbody设置滚动条
qq_37866866的博客
06-12 1492
代码如下：(数据DeviceList、funcName等字段可直接删除，只是做多数据的展示，根据自己的数据进行修改)将table的thead和tbody分成两个table，并将tbody的table用div包起来。用得最多，也比较好的方案。
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
table表格显示滚动条
weixin_60645637的博客
11-17 2944
在table父级元素中设置 overflow-y: auto;保持table父级元素和table大小相同；
html table tbody 滚动条,tabletbody加横向滚动条_html/css_WEB-ITnose
weixin_33102135的博客
06-17 408
想在table tbody加一个横向滚动条但是加上去了以后做成的网格线变的乱七入槽的。正常是这种网格在它的tbody下面加一个横向滚动条代码－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－CSS：html:----------------------------------------------------------------------...
antd table 表格横向滚动条固定在底部
05-25
要实现表格横向滚动条固定在底部，可以使用以下步骤： 1. 设置表格容器的高度，以便在表格内容过多时会出现纵向滚动条。 2. 设置表格的 scroll 属性，包括 x 和 y 两个参数，其中 x 用于控制横向滚动条的出现，y 用于控制纵向滚动条的出现。 3. 设置表格底部的固定行，使用 Table 组件的 footer 属性，将 footer 设为一个函数，返回一个固定行的 JSX 元素。 4. 在固定行的 JSX 元素中，设置一个空白的占位符元素，高度与表格容器的高度相同，以便在表格内容不足时，固定行也能占据整个表格底部。同时，设置一个空白的 div 元素，宽度与横向滚动条的宽度相同，以便在表格内容过多时，横向滚动条能够正常出现。 下面是一个示例代码： ``` import { Table } from 'antd'; const dataSource = [ // 数据源 ]; const columns = [ // 表头列配置 ]; const fixedRowHeight = 50; // 固定行的高度 const scrollHeight = 400; // 表格容器的高度 const scrollWidth = 1200; // 表格内容的宽度，需要根据实际情况进行调整 function renderFooter() { return ( <tr> <td colSpan={columns.length}> <div style={{ height: `${scrollHeight - fixedRowHeight}px` }} /> <div style={{ width: `${scrollWidth}px`, height: `${fixedRowHeight}px` }} /> </td> </tr> ); } function App() { return ( <Table dataSource={dataSource} columns={columns} scroll={{ x: scrollWidth, y: scrollHeight }} footer={renderFooter} /> ); } ``` 在上面的代码中，我们先设置了固定行的高度和表格容器的高度，然后在 renderFooter 函数中，返回一个包含空白占位符和横向滚动条占位元素的 JSX 元素。最后，在 Table 组件中，将 scroll 属性设置为包含横向滚动条宽度和表格容器高度的对象，将 footer 属性设置为 renderFooter 函数即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值