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

最新推荐文章于 2024-06-25 17:32:29 发布
最新推荐文章于 2024-06-25 17:32:29 发布
阅读量5.7k 收藏
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>


啊哈前端
关注
jsp中为表格添加水平滚动条的方法
10-21
将`overflow-x`设置为`auto`或`scroll`，可以让表格在水平方向上显示滚动条。 ```css table { width: 100%; overflow-x: auto; } ``` 3. **Bootstrap框架下的处理**： 如果你的项目使用了Bootstrap框架，其默认...
实例讲解DataTables固定表格宽度(设置横向滚动条)
08-30
5. 横向滚动条：可以通过设置overflow-x:auto来实现横向滚动条，表示表格内容超出宽度后，出现横向滚动条。 6. 为什么不用"scrollX":true的配置："scrollX":true的配置会将表格拆分成两个表格，一个表示表头，一个...
css overflow:auto 没出现滚动条
weixin_43276017的博客
06-08 3052
ul设置了overflow:auto却没出现滚动条 原因1：需要滚动的盒子没给高度
overflow：auto出现滚动效果不显示滚动条
zkx529的博客
05-11 5416
问题描述 overflow：auto 子元素超过父元素高度或者宽度时会出现滚动条（需要设置高度和宽度），当我这么设置之后出现了滚动效果却没有滚动条。 问题原因 全局写了滚动条宽度为0。 ::-webkit-scrollbar : {width:0} 当我用样式覆盖后还是没有出现。 ::-webkit-scrollbar : {width:0} 可能原因是样式没有写完整。 解决办法 将样式写全 .printLogFather::-webkit-scrollbar { widt
Element-table 滚动条没有显示，但是可以鼠标滚轮下滑 --一定要试一下（网上大部分解决方法均无果）
最新发布
weixin_51998255的博客
06-25 1105
使用的element版本为2.8.2，其他版本大概率也是这种解决方案。网上查找该问题，设置了hieght，也把table样式分开写到了style中，试了好多都没有解决。2.找到滚动条的样式设计 （我的就在第一个特别好找），可以看到项目自动设置滚动条的高和宽为零。照着网上的所有方法都试了一遍，无果。最后没办法一个一个文件排查出来了这个问题，希望可以帮助到遇到这个问题的同学。1.找到你的设置滚动条样式的css文件。你的项目本地css架构中大概率设置了滚动条框长宽为零，所以显示不出来滚动框。
html浮动div同行显示,div已经设了over-flow:auto;为什么没有滚动条浮动元素不能同行显示了，怎么办...
weixin_33795788的博客
06-16 286
我想让浮动元素同行显示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...
CSS-界面滚动时不显示滚动条
热门推荐
MichaelAn的博客
03-17 6万+
最近产品提出一个需求，在界面滚动时，元素右侧不显示滚动条。查了网上的答案，最后总结了一下几个情况。 1、设置常规的滚动条：使用 overflow:auto。父元素需要设置一个高度，设置相对定位，这样子元素的高度大于父元素高度才能显示滚动条。如果父元素的高度完全由子元素撑开，界面上不会出现滚动条。设置overflow：auto 失效的主要问题：可能是这个div没有设置 100% 然后父元素清除浮动......
html移动端隐藏滚动条,【前端】移动端使用overflow-y: auto; 可以滚动，但是没有出现滚动条，怎么让其显示？...
weixin_31445091的博客
06-03 2361
我不管，我要滚动条！！！！回答可以使用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, ...
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
08-31
Bootstrap Table 默认将表格内容区域（.fixed-table-body）设置为具有 `overflow-y: auto` 属性，以实现表格内容的垂直滚动。但这个设置在显示下拉菜单时会导致菜单被滚动条遮挡，尤其是在表格的最后一行。 解决这...
jquery给表格加滚动条
03-23
3. 添加CSS样式：为表格设置固定宽度和高度，然后为`<tbody>`添加垂直滚动条。 ```css #scrollingTable { width: 100%; height: 300px; overflow-y: auto; /* 添加垂直滚动条 */ } ``` 4. 使用jQuery：在文档加载...
css之使table也能overflow:hidden
10-30
其常见值包括visible（默认值，溢出内容会显示在元素框之外）、hidden（溢出的内容会被裁剪，并且不可见）、scroll（溢出内容会导致出现滚动条，无论是否真的需要滚动）、auto（溢出内容会导致滚动条，但只在需要时...
uniapp如何设置横向滚动，而且没有滚动条
小蜗牛的博客
05-15 1610
设置横向滚动 overflow-x: auto; display: -webkit-box; overflow-y: hidden; 隐藏横向滚动条 ::-webkit-scrollbar { display: none; }
2018-11-30-WPF-解决-ListView-的滚动条不显示
lindexi
11-21 1359
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 824
最开始的需求是出现一个弹出框，弹出框下面部分不会滚动，但是发现一个问题，就是不滚动和可以滚动的区别是滚动条，而滚动条占据了宽度，设置100%就会使内容各种跳，一开始用了各种方法，js用过，但是不好，虽然我是点击事件，但是能用css解决的就不用js。后来用了各种绝对定位盖住滚动条啊，calc盖住滚动条啊，都不完美，总是有新的问题出现，然后就发现了一个大神的空间有一个完美解决此问题的方法，然后试过之后
VUE移动端使用overflow-auto滚动条坑
weixin_45108907的博客
06-04 6289
解决 滚动条 滑动 一次就一直出现在底部问题 在关闭模态框之前，操作原生dom var box = document.querySelector(‘div’) box .scrollTop=0 设置 滚动条的 位置 为 0， 这样，每次重新打开另一条数据的时候，滚动条的位置都在初始位置顶部 ...
移动端bug1:设置overflow:auto滚动条不显示
gly__gly_的博客
08-29 2401
给父盒子设置了overflow:auto，并没有显示滚动条，咱能用css解决的，就不用js------->
解决 前端 设置滚动条的宽度后 滚动条消失的问题（解决ie浏览器样式无效的问题）
weixin_53588804的博客
08-29 1474
.op::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius:5px; -webkit-box-shadow: inset005pxrgba(0,0,0,0.2); background:rgba(0,0,0,0.2); } .op::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset005pxrgba(0,0,0,0.2); border-radius:0;
怎么隐藏overflow-x: auto下面的滚动条
qq_38215042的博客
08-03 1万+
//温馨提示：此代码实现的效果只能在开发者工具的移动端页面，才能实现滚动效果 //html代码， &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=dev
微信小程序中overflow:auto无效使用滚动解决
qq_34631220的博客
04-19 2853
<scroll-view style="height: 660rpx;" scroll-y="true"> 内容 </scroll-view>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

啊哈前端

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

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

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

打赏作者

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

抵扣说明：

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

余额充值