在Tabel中使<th>不滚动，内容增加滚动条

最新推荐文章于 2022-08-17 17:18:59 发布
最新推荐文章于 2022-08-17 17:18:59 发布 · 334 阅读 · 0

本文介绍了一个用于展示订单修改记录的HTML结构。通过表格形式详细列举了包括修改用户、时间、项目及内容等关键信息，有助于追踪订单状态变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

var $modify_log=$("#modify_log");
        $modify_log.empty();
      
       var $trBody=$('<tr />');
       $modify_log.append($trBody);
       var $tdBody=$('<td colspan="4"/>');
       $trBody.append($tdBody);
       var $divBody=$('<div  style="height: 400px; overflow-x: hidden; overflow-y: auto; width: 100%;height:100px;"/>');
       $tdBody.append($divBody);
       var $tabelBody=$('<table cellspacing="1" class="resreve_detail_table"  style="width: 100%;"/>');
       $divBody.append($tabelBody);

 

 

 

 

 

 

<table cellspacing="1" class="resreve_detail_table">
        <thead>
          <tr>
            <td width="20%" class="room_state_room_list_date">修改用户</td>
            <td width="20%" class="room_state_room_list_date">修改时间</td>
            <td width="20%" class="room_state_room_list_date">修改项</td>
            <td width="40%" class="room_state_room_list_date">更改内容</td>
          </tr>
        </thead>
        <tbody id="modify_log"><tr><td colspan="4"><div style="overflow-x: hidden; overflow-y: auto; width: 100%; height: 100px;"><table cellspacing="1" style="width: 100%;" class="resreve_detail_table"><tbody><tr><td class="room_state_tb_gery">CCXML</td><td class="room_state_tb_gery">2010-04-2</td><td style="text-align: left;" class="room_state_tb_gery">订单类型</td><td style="text-align: left;" class="room_state_tb_gery">取消单</td></tr><tr><td class="room_state_tb_gery">CCXML</td><td class="room_state_tb_gery">2010-04-2</td><td style="text-align: left;" class="room_state_tb_gery">订单备注</td><td style="text-align: left;" class="room_state_tb_gery">yyyyasdsfsdfsdfsdfdsfsd  </td></tr><tr><td></td><td></td><td style="text-align: left;" class="room_state_tb_gery">保留时间</td><td style="text-align: left;" class="room_state_tb_gery">1970-01-01</td></tr><tr><td></td><td></td><td style="text-align: left;" class="room_state_tb_gery">订单类型</td><td style="text-align: left;" class="room_state_tb_gery">修改单</td></tr><tr><td class="room_state_tb_gery">CCXML</td><td class="room_state_tb_gery">2010-04-2</td><td style="text-align: left;" class="room_state_tb_gery">订单备注</td><td style="text-align: left;" class="room_state_tb_gery">yyyydfgrgreger  </td></tr><tr><td></td><td></td><td style="text-align: left;" class="room_state_tb_gery">保留时间</td><td style="text-align: left;" class="room_state_tb_gery">1970-01-01</td></tr><tr><td></td><td></td><td style="text-align: left;" class="room_state_tb_gery">顾客手机</td><td style="text-align: left;" class="room_state_tb_gery">13000000000</td></tr><tr><td></td><td></td><td style="text-align: left;" class="room_state_tb_gery">订单类型</td><td style="text-align: left;" class="room_state_tb_gery">修改单</td></tr></tbody></table></div></td></tr></tbody>
      </table>

滚动条下拉时 table 的thead 固定在网页固定在顶部不动
06-17 2万+
一、效果图 二、前端页面 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 场地预定 .table-chang{margin-left: 0px
table表头行不动
bruobuqi的博客
12-27 4190
今天遇到一个问题怎么使表头行不动 如图： 仔细思考之后发现没有此类的参考怎么办呢？ 解决方案是使用俩个table：1.一个table是表头，一个table是下面的 具体代码如下： //html代码：     具体js代码：因为我的table是动态生成的 function CreateTable(Count) { //动态生成table var tabl
如何让表头th不滚动
linhuiDragon的专栏
10-31 865
[color=red][align=center][size=x-large]表格带滚动条 如何让表头th不滚动[/size][/align][/color] [code="html"] row1 row2 row3 row4 20120714 ...
html中加滚动条,html中为t-body添加滚动条问题
weixin_39966130的博客
05-31 1091
问题描述有这样一个表格，我想为表格内容(t-body)添加垂直滚动条，我的思路是给t-body一个固定高度，然后设置overflow,由于高度设置不起作用，所以给t-body加一个属性display:block;。然后下面是效果图：tbody {display: block;height: 150px;overflow: auto;}此时已经出现了滚动条了，但是tbody整个和thead中的一个...
使用DataTable，th和td没有同时X轴滚动，绑定两个滚动条同时滚动
高压锅博客
06-29 409
1. 基本知识点： sroll()方法：当用户滚动指定的元素时，会发生 scroll 事件 srollLeft():返回或设置匹配元素的滚动条的水平位置 scrollTop() ::返回或设置匹配元素的滚动条的垂直位置 案例：A和B绑定同时滚动 <div> <div class="test"> <div class="A"> A is here！！！ </div> </div>
给td添加滚动条
weixin_30642869的博客
12-22 206
<td><div style="overflow-y:scroll;height:330px;">test</div></td> 转载于:https://www.cnblogs.com/seeusmile-cnblog/p/6211240.html
table实现表头不动，而数据滚动操作
w375179337的专栏
02-05 1万+
   New Document            body,table, td, a {font:9pt;} /*重点：固定行头样式*/.scrollRowThead{position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);z-i
<div class="table-container"><table id="my-table"><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Fixed</td><td>Data 1</td><td>Data 2</td></tr><tr><td>Fixed</td><td>Data 3</td><td>Data 4</td></tr></tbody></table><table><thead><tr><th>Header 1</th></tr></thead><tbody><tr><td>Fixed</td></tr><tr><td>Fixed</td></tr></tbody></table></div> 实现拖动父级滚动条超出100像素固定表格下所有的第一列td 实例
06-03
可以通过以下方式实现拖动父级滚动条超出100像素固定表格下所有的第一列td： 1. 首先将所有第一列的单元格设置为固定宽度，并将它们设置为相对定位。 2. 使用 JavaScript 监听父级容器的滚动事件，并根据滚动距离...
bootstrap <div class="table-responsive" style="height: auto;"> <table class="table table-hover table-striped b-t b-light" style="display:block; max-height:800px;overflow-y: scroll;"> <thead> <tr> <th>序号</th> <th>工单</th> <th>条码</th> <th>型号</th> <th>资源</th> <th>设备编号</th> <th>工序</th> <th>工序中文描述</th> <th>建档日期</th> <th>结果</th> <th>不良代码</th> <th>不良代码明细</th> <th>备注</th> <th ng-repeat="item in fields">{{item.filedName}}</th> <th>建档人</th> </tr> </thead> <tbody > <tr ng-repeat="item in page"> <td>{{$index + 1}}</td> <td>{{item.gd}}</td> <td>{{item.sfc}}</td> <td>{{item.xh}}</td> <td>{{item.resourceId}}</td> <td>{{item.machineNo}}</td><!--等待乙方提供设备编号--> <td>{{item.opeationId}}</td> <td>{{item.operationName}}</td> <td>{{item.czDate}}</td> <td>{{item.flag}}</td> <td>{{item.ngCode}}</td> <td>{{item.ncDesc}}</td> <td>{{item.demo}}</td> <td ng-repeat="field in fields"> {{item[field.tableField]}} </td> <td>{{item.czUser}}</td> </tr> </tbody> </table> </div> 这个代码怎么固定表头做内容滚动
05-30
可以在表头部分添加固定样式，使其固定在页面顶部，然后设置表格内容的最大高度和垂直滚动条即可。具体代码如下： ``` <div class="table-responsive" style="height: auto;"> <table class="table table-hover ...
html<table>固定<th>标签，一页显示10条<td>超过的滚轮下滚查看
最新发布
05-23
在此结构中，`<div>` 包裹整个表格并设置了高度限制和垂直滚动条[^1]。 --- #### 2. **CSS 样式控制** 为了让表头保持固定，而表格主体支持滚动，需要对 `<thead>` 应用特定样式： ```css thead { position: ...
table固定表头
bluelotos893的博客
04-01 3206
table内容很多的时候需要固定表头以获取更好的浏览体验，这就需要另外制作一个内容一样的表头来掩人耳目，但是由于是两个不同的表格，随着真实表格内容的变化，真实表格表头的宽度也会随之变化，而赝品的表格则不会变化，分分钟就露馅了。 解决思路： 保持两个表格的宽度一致 保持表头的th或者tr宽度一致 保持两个表格的边框、padding样式一致 赝品的表格定位在顶部不跟随滚动 表格数据变化时宽度会改变...
table th、td设置最大高，超高度出现滚动条
xjh的博客
08-17 6224
th、td最大高超出滚动，table border随滚动条移动
ScrollReveal-元素随页面滚动产生动画
05-16
ScrollReveal-元素随页面滚动产生动画
关于css table添加横向滚动条,tb、th长度自适应
pingpangpangpang的博客
07-05 3021
关于css table添加横向滚动条,tb、th长度自适应
bootstrap Table实现锁定列不滚动功能
liaomingwu的专栏
04-02 4720
bootstrap Table实现锁定列不滚动功能
Table显示滚动条（简单方法）
热门推荐
Day by day的博客
03-23 2万+
转载地址：http://blog.sina.com.cn/s/blog_821025b70100wf82.html Table显示滚动条，要先把table放到一个div中，div的长度和宽度要固定，控制overflow属性为scroll div style="width:700px; height:225px; overflow:scroll;">     ... di
HTML滚动条
菜鸟小灰灰的博客
01-15 647
滚动条第一种方式： CSS linear-gradient()_CSS3 000102030405 101112131515 202122232425 303132333435 滚动条第二种方式： CSS linear-gradient()_CSS
html table 标题 不滚动
黑色雨滴
05-09 423
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;&lt;head&gt; &lt;style type="text/css"&gt; &lt;!-- body { background: #FFF; color: #000; font: no
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值