设置overflow:auto表格没有滚动条的解决办法

最新推荐文章于 2024-06-26 09:58:38 发布
最新推荐文章于 2024-06-26 09:58:38 发布
阅读量5.8k 收藏
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wuzhe128520/article/details/50220147
版权 
<div class="listContent" style="overflow-x: auto;">
    <table cellpadding="0" cellspacing="0" style="table-layout: fixed;width:0px;">
        <tr class="header">
            <td style="width: 55px;">客户</td>
            <td  style="width: 55px;">车型</td>
            <td  style="width: 55px;">区分</td>
            <td  style="width: 635px;">15年1月</td>
            <td  style="width: 125px;">15年2月</td>
            <td  style="width: 125px">15年3月</td>
            <td  style="width: 125px">15年4月</td>
            <td  style="width: 125px">15年5月</td>
            <td  style="width: 125px">15年6月</td>
            <td  style="width: 125px">15年7月</td>
            <td  style="width: 125px">15年8月</td>
            <td  style="width: 125px">15年9月</td>
            <td  style="width: 140px;">15年10月</td>
            <td  style="width: 140px;">15年11月</td>
            <td  style="width: 140px;">15年12月</td>
            <td  style="width: 150px;">16年上半年</td>
            <td  style="width: 150px;">16年下半年</td>
            <td  style="width: 150px;">17年上半年</td>
            <td  style="width: 150px;">17年下半年</td>
            <td  style="width: 150px;">18年上半年</td>
            <td  style="width: 150px;">18年下半年</td>
            <td  style="width: 150px;">19年上半年</td>
            <td  style="width: 150px;">19年下半年</td>
        </tr>
        <tr class="listtr">
            <td>东风</td>
            <td>P32L</td>
            <td>台数</td>
            <td class="paddbtn"><input type="text" value="49300"><span class="delete_Btn">最新</span><span class="marbtn">选择台座</span><span class="marbtn">打开台座</span></td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="listtr">
            <td>东风</td>
            <td>P32L</td>
            <td>台数</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="listtr">
            <td>东风</td>
            <td>P32L</td>
            <td>台数</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="listtr">
            <td>东风</td>
            <td>P32L</td>
            <td>台数</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="listtr">
            <td>东风</td>
            <td>P32L</td>
            <td>台数</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="cutline"><td colspan="18"></td></tr>
        <tr class="listtr">
            <td>ck</td>
            <td>P32L</td>
            <td>台数</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="listtr">
            <td>ck</td>
            <td>P32L</td>
            <td>台数</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="listtr">
            <td>ck</td>
            <td>P32L</td>
            <td>台数</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="listtr">
            <td>ck</td>
            <td>P32L</td>
            <td>台数</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="listtr">
            <td>ck</td>
            <td>P32L</td>
            <td>台数</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td>49300</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="cutline"><td colspan="18"></td></tr>
    </table>


[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
警警的博客
03-31 816
• overflow失效核心：容器尺寸未定义、Flex 布局未限制最小尺寸、定位冲突。•流式滚动本质：动态内容更新 + DOM 操作触发滚动定位。•进阶场景：结合虚拟滚动技术（如）处理海量数据渲染。
实例讲解DataTables固定表格宽度(设置横向滚动条)
08-30
5. 横向滚动条：可以通过设置overflow-x:auto来实现横向滚动条，表示表格内容超出宽度后，出现横向滚动条。 6. 为什么不用"scrollX":true的配置："scrollX":true的配置会将表格拆分成两个表格，一个表示表头，一个...
css overflow:auto 没出现滚动条
weixin_43276017的博客
06-08 3211
ul设置了overflow:auto却没出现滚动条 原因1：需要滚动的盒子没给高度
overflow：auto出现滚动效果不显示滚动条
zkx529的博客
05-11 6774
问题描述 overflow：auto 子元素超过父元素高度或者宽度时会出现滚动条（需要设置高度和宽度），当我这么设置之后出现了滚动效果却没有滚动条。 问题原因 全局写了滚动条宽度为0。 ::-webkit-scrollbar : {width:0} 当我用样式覆盖后还是没有出现。 ::-webkit-scrollbar : {width:0} 可能原因是样式没有写完整。 解决办法 将样式写全 .printLogFather::-webkit-scrollbar { widt
display: flex下设置 overflow-x: auto不出现滚动条且子元素收缩宽度解决方案
最新发布
u011725256的博客
06-26 1811
但是，如果你同时设置了 width 和 flex-basis，且容器有足够的空间，那么项目的大小可能会是两者中较大的那个（取决于其他因素，如 min-width、max-width 等）。flex 属性与 min-width/max-width 的关系：min-width 和 max-width 可以限制 Flex 子项的最小和最大宽度。flex-shrink 默认为 1：如果 Flex 子项的总宽度超过了容器，并且 flex-shrink 未被设置为 0，那么子项会缩小以适应容器。
html浮动div同行显示,div已经设了over-flow:auto;为什么没有滚动条浮动元素不能同行显示了，怎么办...
weixin_33795788的博客
06-16 311
我想让浮动元素同行显示body{ margin:0 auto; font:12px Arial, Helvetica, sans-serif "宋体"; color:#666; }p,ul,li{ margin:0; padding:0 ;display:block;}li{ list-style:none;}.common{ line-height:25px; width:810px; marg...
jsp中为表格添加水平滚动条的方法
10-21
将`overflow-x`设置为`auto`或`scroll`，可以让表格在水平方向上显示滚动条。 ```css table { width: 100%; overflow-x: auto; } ``` 3. **Bootstrap框架下的处理**： 如果你的项目使用了Bootstrap框架，其默认...
纯css实现table滚动条(纯css实现div滚动条)
04-23
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
jquery给表格加滚动条
03-23
3. 添加CSS样式：为表格设置固定宽度和高度，然后为`<tbody>`添加垂直滚动条。 ```css #scrollingTable { width: 100%; height: 300px; overflow-y: auto; /* 添加垂直滚动条 */ } ``` 4. 使用jQuery：在文档加载...
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
08-31
Bootstrap Table 默认将表格内容区域（.fixed-table-body）设置为具有 `overflow-y: auto` 属性，以实现表格内容的垂直滚动。但这个设置在显示下拉菜单时会导致菜单被滚动条遮挡，尤其是在表格的最后一行。 解决这...
CSS-界面滚动时不显示滚动条
热门推荐
MichaelAn的博客
03-17 6万+
最近产品提出一个需求，在界面滚动时，元素右侧不显示滚动条。查了网上的答案，最后总结了一下几个情况。 1、设置常规的滚动条：使用 overflow:auto。父元素需要设置一个高度，设置相对定位，这样子元素的高度大于父元素高度才能显示滚动条。如果父元素的高度完全由子元素撑开，界面上不会出现滚动条。设置overflow：auto 失效的主要问题：可能是这个div没有设置 100% 然后父元素清除浮动......
html移动端隐藏滚动条,【前端】移动端使用overflow-y: auto; 可以滚动，但是没有出现滚动条，怎么让其显示？...
weixin_31445091的博客
06-03 2409
我不管，我要滚动条！！！！回答可以使用css，让滚动条显示出来。代码如下：.rows {height: 230px;overflow: hidden;overflow-y: auto;}.rows::-webkit-scrollbar-track-piece {background-color: rgba(0, 0, 0, 0);border-left: 1px solid rgba(0, 0, ...
uniapp如何设置横向滚动，而且没有滚动条
小蜗牛的博客
05-15 1662
设置横向滚动 overflow-x: auto; display: -webkit-box; overflow-y: hidden; 隐藏横向滚动条 ::-webkit-scrollbar { display: none; }
2018-11-30-WPF-解决-ListView-的滚动条不显示
lindexi
11-21 1438
title author date CreateTime categories WPF 解决 ListView 的滚动条不显示 lindexi 2018-11-30 19:24:57 +0800 2018-11-30 19:14:21 +0800 WPF 本文告诉大家如何解决一个...
CSS vw让overflow:auto页面滚动条出现时不跳动
qq_33335751的博客
02-21 890
最开始的需求是出现一个弹出框，弹出框下面部分不会滚动，但是发现一个问题，就是不滚动和可以滚动的区别是滚动条，而滚动条占据了宽度，设置100%就会使内容各种跳，一开始用了各种方法，js用过，但是不好，虽然我是点击事件，但是能用css解决的就不用js。后来用了各种绝对定位盖住滚动条啊，calc盖住滚动条啊，都不完美，总是有新的问题出现，然后就发现了一个大神的空间有一个完美解决此问题的方法，然后试过之后
VUE移动端使用overflow-auto滚动条坑
weixin_45108907的博客
06-04 6347
解决 滚动条 滑动 一次就一直出现在底部问题 在关闭模态框之前，操作原生dom var box = document.querySelector(‘div’) box .scrollTop=0 设置 滚动条的 位置 为 0， 这样，每次重新打开另一条数据的时候，滚动条的位置都在初始位置顶部 ...
css设置 overflow:auto；为什么没有出现滚动条
weixin_57033986的博客
12-16 1766
css设置 overflow:auto;为什么没有出现滚动条
移动端bug1:设置overflow:auto滚动条不显示
gly__gly_的博客
08-29 2505
给父盒子设置了overflow:auto，并没有显示滚动条，咱能用css解决的，就不用js------->
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

啊哈前端

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值