取消table滚动条

最新推荐文章于 2024-05-28 20:52:48 发布
最新推荐文章于 2024-05-28 20:52:48 发布
阅读量7k 收藏
点赞数
分类专栏： 前端 文章标签： 取消滚动条 滚动条
禁止商用，转载请注明出处。如有不妥之处，望大佬斧正。联系方式：supreme_tt@163.com
本文链接：https://blog.csdn.net/Supreme_Sir/article/details/80979638
版权

闲话少叙，上代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
	.layerManagementTable{
	    width: 100%;
	    border: 0.1vw solid #E6E6E6;
	    border-collapse: collapse;
	    color: #666;
	}
	.layerManagementTable thead, .layerManagementTable tbody tr:nth-child(even), .layerManagementTable tbody tr:hover{
	    background-color: #F2F2F2;
	}
	.layerManagementTable th, .layerManagementTable td{
	    border: 0.1vw solid #E6E6E6;
	    text-align: center;
	    height: 4vh;
	    font-size: 1.6vh;

	}
	.layerManagementTable thead, .layerManagementTable tr{
	    display: table;
	    width: 100%;
	}
	.layerManagementTable tbody{
	    display: block;
	    height: 70vh;
	    overflow-y: scroll;
	    overflow-x: hidden;
	}
	.layerManagementTable tbody::-webkit-scrollbar {/*滚动条整体样式*/
		width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
		/*display: none;*//*隐藏滚轮*/
	}
	.layerManagementTable tbody::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		background: #535353;
	}
	.layerManagementTable tbody::-webkit-scrollbar-track {/*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		border-radius: 10px;
		background: #EDEDED;
	}
</style>
</head>
	<body>
		<table class="layerManagementTable">
	        <thead>
	            <tr>
	                <th>数据源</th>
	                <th>图层名称</th>
	                <th>图层状态</th>
	                <th>图层操作</th>
	            </tr>
	        </thead>
	        <tbody id="layerManagementTbody"></tbody>		
	    </table>
		<script type="text/javascript">
			var s = "";
			for (var i = 0; i < 40; i++) {
				s += "<tr><td>数据源</td><td>图层名称</td><td>图层状态</td><td>图层操作</td></tr>";
			}
			document.getElementById('layerManagementTbody').innerHTML += s;
	
		</script>
	</body>
</html>
Supreme_Sir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中的滚动条/去掉滚动条
科研这件小事
09-15 9797
xhtml下frame页面横向滚动条的问题 在用ie6浏览有框架的xhtml页面的时候，默认会水平和垂直滚动条会一起出现，这是ie6的一个bug，在firefox上是正常的，出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷。 对于这个bug一般有3种解决方案， 方法1： 代码： html { overflow-y: scroll;
layui table去掉右侧滑动条的实现方法
10-16
这种方法适用于表格内容不需要分页的情况，如果内容过多需要分页，可以考虑调整表格的布局或采用其他展示方式，以避免滚动条的出现。值得注意的是，这种方法仅适用于页面加载完成后表格的初始设置，如果表格内容是...
el-table去掉滚动条（兼容谷歌火狐）
weixin_43550562的博客
10-08 3016
// 隐藏滚动条 /deep/ .el-table__body-wrapper::-webkit-scrollbar { /*width: 0;宽度为0隐藏*/ width: 0px; } /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 2px; height: 50px; background: #eee;...
element-ui组件table去除下方滚动条，实现鼠标左右拖拽移动表格
懒人w的博客
05-28 1169
项目前端使用vue框架，页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时，下方会出现横向的滚动条，便于用户对表格进行左右滑动。考虑到页面美观问题，滚动条设置的很窄，导致用户使用时不方便进行左右滑动。 现要求，去除表格下方滚动条，用户可直接拖拽表格实现左右滑动功能。
table不出现滚动条的写法
zyc050707的博客
06-24 2964
table{ table-layout: fixed; }
如何去掉滚动条
weixin_30861459的博客
12-03 71
如何去掉滚动条， 今天调试项目的时候看到 在div下面套一个table ,如果table条数过多就会出项两个滚动条，如下图： 代码如下： <div id="xx" style="height: auto; margin: 0px; clear: both; overflow-y:auto"><table id="dd" style="height: auto;"&gt...
如何去掉滚动条，
weixin_33888907的博客
11-07 77
今天调试项目的时候看到 在div下面套一个table ,如果table条数过多就会出项两个滚动条，如下图： 代码如下： <div id="xx" style="height: auto; margin: 0px; clear: both; overflow-y:auto"> <table id="dd" style="heig...
解决layui数据表格table的横向滚动条显示问题
10-16
今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
01-19
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <... <head>... <div class=table-responsive> <tabl
element-ui 中的table的列隐藏问题解决
12-12
因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列可以方便的看见比较重要的几列的内容。用之前的方法的话，非常简单，直接设置display的显示和隐藏就可以了。 但是放在element-ui中来就...
前端产生滚动条去掉滚动条
m0_52244931的博客
06-10 1188
前端产生滚动条去掉滚动条 代码如下，.sTable是自己起的class类名 .sTable::-webkit-scrollbar{ display: none; }
layui表格取消横向滚动条,00011 - layui 表格table列固定宽，且超出屏幕时横向滚动...
weixin_39984952的博客
03-16 191
```var tableIns = table.render({elem:'#taskOptLogListTable',url: ctx+'/task/taskOptLog/query',error:admin.error,cellMinWidth: 80,toolbar: '#taskOptLogListTable-toolbar',defaultToolbar: [{title: '条件过滤'...
前端滚动条样式调整及取消x轴滚动条
taopeijiang的博客
11-02 697
前端滚动条样式调整
bootstrap表格数据横向过长则可左右水平滚动条拖动，以及如何隐藏滚动条
weixin_43735471的博客
08-18 2222
表格左右滑动实现
position:fixed固定后禁止底层元素上下滑动
weixin_42220130的博客
02-19 2236
用一个view把代码包起来， 当模态层出来时给它添加height:100%;position: absolute;overflow: hidden; 模态框消失时去掉样式 <view class="box" :class={"fixedHeight:xxx===xxx"}> <view>内容<view> <view>弹窗<view> </view> <style> .fixedHeight { height:100%;
消除垂直滚动条
chen___sir_的博客
07-03 363
先是这样写的，header高度设置为5%，container高度设置为95%，感觉没啥问题，但是会出现垂直滚动条，如图： 只需要去掉一个高度就可以了，注释掉height:5%;，滚动条就消失了
vue elementui table去掉滚动条与实现表格自动滚动且无滚动条
Smile yourlife
07-25 6061
现在需求是右侧滚动条不好看，需要去除滚动条，并隐藏滚动条所占列的位置。让他可以滚动但是不出现滚动条,不然即时隐藏了滚动条也会有一个空白列影响占位的。当table内容列过多时，可通过height属性设置table高度以固定table高度、固定表头，使table内容可以滚动。如果样式不想影响全局，可以使用样式穿透。autoScroll.js 工具类。下面记录代码，亲测有效。
elementUI 表格组件设置高度之后去除滚动条
qq_34453435的博客
08-31 513
elementUI 表格组件设置高度之后去除滚动条
隐藏table的滚动条
m0_58361435的博客
11-14 726
【代码】隐藏table的滚动条。
layui table 滚动条加宽
最新发布
06-25
在使用过程中，如果想要为layui table的滚动条添加宽度，可以考虑以下几个步骤： 1. 默认情况下，layui table的滚动条宽度可能不会自动调整到适应容器的宽度，特别是当表格内容超出父元素时。 2. 如果你希望滚动条...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值