table（head固定，body左右上下滚动）

最新推荐文章于 2024-05-29 09:30:57 发布
最新推荐文章于 2024-05-29 09:30:57 发布
阅读量1.9k 收藏
点赞数
分类专栏： 前端组件库 文章标签： table滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsl_csdn/article/details/80002441
版权

自定义table，模拟表格内容显示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>《table》表头固定，内容区上下左右滚动</title>
<style type="text/css">
.content{
	width: 800px;
	height: 200px;
	margin: auto;

}
.content .headContainer{overflow: hidden;color: #FFFFFF;}
.content .headContainer .tableHead{white-space: nowrap;}
.content .headContainer .tableHead .item{display: inline-block;width: 200px;height: 32px;background-color: #797875;text-align: center;line-height: 32px;border-left: 1px solid #464545;}
.content .headContainer .tableHead .item+.item{margin-left: -4px;}
.content .headContainer .tableHead .item:nth-last-child(2){border-right: 1px solid #464545;}

.content .tableBody{height: 172px;overflow: auto;scrollbar-track-color:#363636;scrollbar-shadow-color:#3B99FC;scrollbar-face-color:#3B99FC;}
.content .tableBody .tableRow{white-space: nowrap;}
.content .tableBody .tableRow .item{display: inline-block;width: 200px;height: 32px;text-align: center;line-height: 32px;border-left: 1px solid #464545;border-bottom: 1px solid #464545;}
.content .tableBody .tableRow .item::before{content: ".";visibility: hidden;}
.content .tableBody .item+.item{margin-left: -4px;}
.content .tableBody .item:last-child{border-right: 1px solid #464545;}

</style>
</head>
<body>

      <div class="content">
        <div class="headContainer">
          <div class="tableHead tableRowOne">
            <div class="item">序号</div>
            <div class="item">船名</div>
            <div class="item">IMO</div>
            <div class="item">MMSI</div>
            <div class="item">船舶类型</div>
            <div class="item">最大吃水(m)</div>
            <div class="item">到港吃水(m)</div>
            <div class="item">上一港</div>
            <div class="item">ATA</div>
            <div class="item">到港时间</div>
            <div class="item" style="width: 17px;visibility: hidden;">.</div>
          </div>
        </div>
        <div class="tableBody">
          <div class="tableRow tableRowOne">
            <div class="item">1</div>
            <div class="item">Champion Prince</div>
            <div class="item">9397157</div>
            <div class="item">563701000</div>
            <div class="item">Suezmax</div>
            <div class="item">8</div>
            <div class="item">10</div>
            <div class="item">南京</div>
            <div class="item">2018-03-15 21:00</div>
            <div class="item">2018-03-15 21:00</div>
          </div>
          <div class="tableRow tableRowOne">
            <div class="item">1</div>
            <div class="item">Champion Prince</div>
            <div class="item">9397157</div>
            <div class="item">563701000</div>
            <div class="item">Suezmax</div>
            <div class="item">8</div>
            <div class="item">10</div>
            <div class="item">南京</div>
            <div class="item">2018-03-15 21:00</div>
            <div class="item">2018-03-15 21:00</div>
          </div>
          <div class="tableRow tableRowOne">
            <div class="item">1</div>
            <div class="item">Champion Prince</div>
            <div class="item">9397157</div>
            <div class="item">563701000</div>
            <div class="item">Suezmax</div>
            <div class="item">8</div>
            <div class="item">10</div>
            <div class="item">南京</div>
            <div class="item">2018-03-15 21:00</div>
            <div class="item">2018-03-15 21:00</div>
          </div>
          <div class="tableRow tableRowOne">
            <div class="item">1</div>
            <div class="item">Champion Prince</div>
            <div class="item">9397157</div>
            <div class="item">563701000</div>
            <div class="item">Suezmax</div>
            <div class="item">8</div>
            <div class="item">10</div>
            <div class="item">南京</div>
            <div class="item">2018-03-15 21:00</div>
            <div class="item">2018-03-15 21:00</div>
          </div>
          <div class="tableRow tableRowOne">
            <div class="item">1</div>
            <div class="item">Champion Prince</div>
            <div class="item">9397157</div>
            <div class="item">563701000</div>
            <div class="item">Suezmax</div>
            <div class="item">8</div>
            <div class="item">10</div>
            <div class="item">南京</div>
            <div class="item">2018-03-15 21:00</div>
            <div class="item">2018-03-15 21:00</div>
          </div>
          <div class="tableRow tableRowOne">
            <div class="item">1</div>
            <div class="item">Champion Prince</div>
            <div class="item">9397157</div>
            <div class="item">563701000</div>
            <div class="item">Suezmax</div>
            <div class="item">8</div>
            <div class="item">10</div>
            <div class="item">南京</div>
            <div class="item">2018-03-15 21:00</div>
            <div class="item">2018-03-15 21:00</div>
          </div>
        </div>
      </div>



<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="application/javascript">
	$('.tableBody').on('scroll', function () {
	    var left = $(this).scrollLeft();
	    $(this).prev().scrollLeft(left);
	});

</script>
</body>
</html>

zsl_csdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table 表头固定
github_38186390的博客
09-27 1974
一。table 表头固定说明。我们将表头和表内容分成两个表格就可以解决该问题。 二。代码。 css代码：里面定死的宽高只是为啦方便看效果，实际中需要使用js计算出来。 * { box-sizing: border-box; } .table { border: 1px solid #efefef; ...
html表头跟随滚动,table的表头固定--上下滚动表头固定，左右滚动跟随滚动
weixin_42506994的博客
06-07 2205
遇到这种固定表格的，我们一般都是写两个table，一个放thead，一个放tbody；如果表格内容少，我们只需要给两个table100%宽度就行，如果遇到表格内容很长的就比较棘手了；1.上面的table的父容器div样式：#fixedDiv {position: absolute;left: 0;right: 0;overflow: hidden;//这里hidden是用于隐藏滚动条}2.下面的...
el-table表格实现鼠标拖动而左右滑动
最新发布
sinat_33255495的博客
05-29 704
表格样式较为复杂，10条数据超出整个屏幕的高度，因而导致无法快速拖动滚动条，所以提出需要在表格内容区拖动鼠标，从而实现无需滚动到底部就可以左右拖动表格内容的效果。实现的方式通过注册一个自定义指令，方便随时调用这个鼠标拖动的能力。
table标签的head和body部分的右边框不能是一个有一个无
huakaiwuxing的博客
03-06 258
今天遇到了一个挺神奇的问题，一个表格的head部分要求没有有边框，而tbody部分要求有右边框，但是单独对其设定有无右边框并没有用，用的是border：none；后来索性都加右边框，但是head部分的右边框色值设定为fff解决了问题 ...
table设置tbody滚动条
叶落无痕的博客
09-28 2190
table tbody { display: block; height: 400px; overflow-y: scroll; } table thead, tbody tr, tfoot tr { display: table; width: 100%; height: 40px; table-layout: fixed; font-size: 16px; text-align:center; } .
如何固定表格四周实现表格上下左右滚动
01-21
问题： 最近做项目统计的时候碰见一个特定的需求，要求表格上下滚动时，表格头尾固定；左右滚动的时候表格，表格第一列最后一列固定。 先上效果图可能会更明了些： 左右滚动时，两列固定，头尾中间部分跟着滚动。 ...
jsp中实现带滚动条的table表格实例代码
10-21
本文将详细介绍如何在JSP（JavaServer Pages）中实现一个带有滚动条的table表格，通过实例代码来帮助理解这一功能。 首先，让我们了解基本的HTML表格结构。在HTML中，`<table>`元素用于创建表格，而`<tr>`定义表格...
HTML固定Table标题行的四种方法
08-31
为解决这一问题，开发者通常采用JavaScript来实现Table标题行的固定，使其在滚动时始终保持可见。本文将详细介绍四种不同的JavaScript方法来实现HTML固定Table标题行。 1. **CSS Sticky Positioning** CSS3中的`...
jQuery实现表头固定表格内容滚动效果
11-02
在网页设计中，当表格数据过多时，为了保持良好的用户体验，常常需要实现表头固定而内容可滚动的效果。`jQuery`作为一个广泛使用的JavaScript库，提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何...
解决layui表格的表头不滚动的问题
10-16
首先，我们需要理解问题的核心在于当表格内容超过可视区域时，只有tbody部分可以滚动，而thead部分固定不动。为了解决这个问题，我们可以采用一种分层的方法，将表头和内容分开处理。 步骤如下： 1. 创建两个 ...
Element 表格实现左右自动滚屏
weixin_39475476的博客
05-18 6555
前两天公司需要实现一个功能(用于大屏幕投屏): 自定义表头及内容 ,并且固定左边几列实现: 从左往右滚屏 滚动到后面没有列后 开始第二页的滚屏,以此类推 拉取到最后 没有数据又从第一页开始滚 实现思路: 监听滚动事件, 页面一加载去后台调用数据,成功后触发事件 判断是否滚动到最后 如果滚到最后 将scrollLeft 设置为0,没有就scrollLeft++; div左边卷去的长度=d...
锁定表头和固定列(Fixed table head and columns)
weixin_30306905的博客
06-30 493
前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 如使用jQuery1.9.x及以上版本，需要引用jQuery Migrate Plugin库，在jQuery官网即可下载到! 因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资...
如何在一个已有的table情况下, 固定表头, 滑动表身
木子李的博客
10-26 1632
原先只有: 它只是一截, 具体接收数据等交给dwz框架的底层实现了. 现在添加一段 js和css即可实现滑动. 注意: div的id 以及 table中的class名称, 和它里面的id 在下方复制时候注意修改. 如果有 则添加在它后面, 如果没有, 也可以将它添加在页面最下方. $(document).ready(function(){ var lis
html中table表头固定，并加滚动条
liuna1024的博客
03-23 7492
                        &lt;table id="app-gas-content"&gt;                                &lt;thead&gt;                                    &lt;tr sstyle="position:fixed;top:XXpx; z-index:2;"&gt;      ...
html table表头固定实现的两种方式
杨宇
10-17 4408
实际项目需求，实例如下 transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&g
table采用定位实现轮播
dyx19971026的博客
09-09 632
今天和大家简单介绍一下table的轮播的自动切换 ``` * { padding: 0; margin: 0; } .one { width: 500px; margin: 0 auto; } .tabHead li { ...
纯css：table表格，让thead固定，tbody有滚动条
weixin_38098192的博客
05-06 4089
css部分：table{ display: block; height: 200px; overflow-y: auto;}table thead, tbodytr{ display:table; width:100%; table-layout:fixed;}table thead{ width: calc( 100% - 1.2em )}html部分：&lt;table class...
table内的文字上下滚动
weixin_30819085的博客
11-24 327
<html><head><meta http-equiv="content-type" content="text/html; charset=gbk"><style>.yellow{ color:#FF0;}</style></head><body> <table align="center" bg...
bootstrap table 表头固定表体滚动
03-29
<title>Bootstrap Table 表头固定表体滚动 .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值