表头固定，内容可以滚动例子

最新推荐文章于 2021-07-10 11:06:54 发布
最新推荐文章于 2021-07-10 11:06:54 发布
阅读量2.9k 收藏
点赞数
文章标签： table function button border xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangsencai/article/details/5955127
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
 #thh th{ cursor:hand;}
 .thd{ border-color:#FF0000; background-color:#00FF00}
 .tht{ border-color:#6666CC; background-color:#6666FF}
</style>
<script language="javascript">
function setWidth(){
   var tb_header = document.getElementsByTagName("table")[0];
   var tb_content = document.getElementsByTagName("table")[1];
  
   for(var i = 0; i < tb_header.rows[0].cells.length; i++){
      tb_header.rows[0].cells[i].width = tb_content.rows[0].cells[i].clientWidth - 1;
   }
   //alert(tb.rows[0].cells[0].clientWidth);
   //tb_content.deleteRow(0);
}

function deletes(){
   //alert("1122");
   var tb_content = document.getElementsByTagName("table")[1];
   tb_content.deleteRow(2);
}

function adds(){
  var tb_content = document.getElementsByTagName("table")[1];
  var row = tb_content.insertRow();
  var cell = row.insertCell();
  cell.innerHTML = "TT";
  cell = row.insertCell();
  cell.innerHTML = "XX";
  cell = row.insertCell();
  cell.innerHTML = "cc";

  setWidth();
}
</script>

</head>
<body οnlοad="setWidth();" >

<div style="margin-left:200px;border-bottom-width:1px">
<div style="height:25px;width:600px;">
<table border="1"  bordercolor="#330099"align="center" width="600px">
<tr  bgcolor="#6666CC" id="thh">
<th>id</th>
<th>name</th>
<th>other</th>
</tr>
</table>
</div>
<div style="height:195px;overflow-y:auto;width:600px;position:absolute;">
<table border="1"  bordercolor="#330099"align="center" width="100%" style="border-top-width:0px;margin-top:-27px;">

<tr  bgcolor="#6666CC" id="thh">
<th  class="tht" >id</th>
<th>name</th>
<th>other</th>
</tr>

<tr >
<td>2</td>
<td>ads</td>
<td>sfdsf</td>
</tr>
<tr>
<td>5</td>
<td>rwww</td>
<td>cssdc</td>
</tr>
<tr>
<td>1</td>
<td>bdssas</td>
<td>kgfdd</td>
</tr>
<tr>
<td>55</td>
<td>cggd</td>
<td>sfdsf</td>
</tr>
<tr>
<td>87</td>
<td>fdss</td>
<td>afaD</td>
</tr>
<tr>
<tr>
<td>2</td>
<td>ads</td>
<td>sfdsf</td>
</tr>
<tr>
<td>5</td>
<td>rwww</td>
<td>cssdc</td>
</tr>
<tr>
<td>1</td>
<td>bdssas</td>
<td>kgfdd</td>
</tr>
<tr>
<td>55</td>
<td>cggd</td>
<td>sfdsf</td>
</tr>
<tr>
<td>87</td>
<td>fdss</td>
<td>afaD</td>
</tr>
<tr>
<td>64</td>
<td>cgfss</td>
<td>yrew</td>
</tr>
<td>64</td>
<td>cgfss</td>
<td>yrew</td>
</tr>
<tr>
<td>2</td>
<td>ads</td>
<td>sfdsf</td>
</tr>
<tr>
<td>5</td>
<td>rwww</td>
<td>cssdc</td>
</tr>
<tr>
<td>1</td>
<td>bdssas</td>
<td>kgfdd</td>
</tr>
<tr>
<td>55</td>
<td>cggd</td>
<td>sfdsf</td>
</tr>
<tr>
<td>87</td>
<td>fdss</td>
<td>afaD</td>
</tr>
<tr>
<td>64</td>
<td>cgfss</td>
<td>yrew</td>
</tr>
</table>
</div>
</div>
<div style="margin-top:200px;">
<input type="button" value="Add" οnclick="adds();"/>
<input type="button" value="Delete" οnclick="deletes();"/>
</div>

</body>
</html>

yangsencai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
bootstrap的table表头固定tbody滚动
热门推荐
Cool的博客
04-11 4万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;link rel="stylesheet" type="text/css" href="css/bootstra
表头固定,内容可滚动表格的3种实现方法
唐策的博客
11-03 5723
一、表格总宽度自动，每列宽度设置统一用设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<div>包裹并设置该 <div> 的高度固定，高度溢出可滚动即可。两个表格的列宽用相同的<colgroup>固定列宽值，需要注意的是滚动条会占用一定的宽度，一般是：17px，所以在表头需要特别处理一下，不然表格就不能对齐了。大家看代码，最简单的办法是表头单独空一列和下面的表格滚动条对齐
HTML table表格 固定表头 tbody加滚动条
沐枫
12-31 1万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
GridView或DataGrid 固定表头,滚动数据的例子学习心得
02-26
1.主要利用table style的 layout=fixed属性按照当前表头再copy一个table,显示在当前datagrid或gridview的前面. 2.注意:调用的时候,datagrid 或gridview 要有style="table-layout:fixed" 和 width=?? 属性.
css 固定表头 拖动滚动条时对应表头所对应的列 ie6测试通过
12-13
项目中设计的报表table设计的列数相对过多，当拖动下方的滚动条时无法对应表头所对应的列，因此在网上搜索了好一段日子，最后在网上找到了一些参考资料，然后总结归纳出兼容行列合并的固定表头demo。 多浏览器没有做...
table固定表头,css控制
08-20
两个例子table固定表头，用css实现，表头固定不动，表格内容随滚动条变化
BootStrap table表格插件自适应固定表头(超好用)
11-22
当然，也可以只在页面上放一个table标签，之后的所有数据和样式都通过js控制也是可以的，后面会说（优点方便控制修改数据，尤其是ajax方式获取的json格式，但是调整样式比较麻烦） ps：这个是插件的官网，里面有...
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
表头固定内容可滚动表格的3种实现方法
weixin_30565327的博客
12-14 1685
有时候，我们在开发前端页面过程中，可能会用到这种表格：表头固定不动，表格内容（<tbody>）需要竖直滚动。 像这样的： 还有这样的： 通过研究，我大致总结了以下三种实现办法供大家参考，如果有错误之处敬请指正，也欢迎拍砖！！ 一、表格总宽度自动，每列宽度设置统一用<colgroup>设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<...
纯css：table表格，让thead固定，tbody有滚动条
weixin_38098192的博客
05-06 4037
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...
HTML表头固定，内容滚动实现
Fuwj001的博客
07-10 2912
在前端开发过程中，经常会遇到一个需求就是，需要一个表格展示数据， 1、表头固定，内容过多的时候向下活动，表头不跟随移动，若表体内容超长时，表头不能移动，表体内容滚动显示； 2、表格头横向随表格内容横向滚动； 效果展示： 关键技术点： 1、表头（意义上的）和表体（意义上的）都用一个table来显示； 2、因为表体可以纵向滚动，右边多出一个纵向滚动条，所以表体的宽度要比表头的宽度多出17个像素，也就是说，如果要设置表格的宽度是500的话，表体的宽度为100%，那表头的宽度就是减去17个像素，
layui table 中固定列的行高和table行高不一致
aaa1222312的博客
06-11 2783
解决方法：只需在done回调函数执行以下方法 done: function(res, curr, count){ $(".layui-table-main tr").each(function (index ,val) { $($(".layui-table-fixed .layui-table-b...
CSS设置table下tbody的滚动条
这是我的博客
02-23 1万+
今天碰到一个关于对tabel的表的滚动事件，需求是表头不动，改变的是tbody，如果tbody里面的内容过多，让其进行滚动事件。 首先想到的就是利用css中overflow-y:scroll; 来进行内容的滚动，但是在处理tabel的display状态时，就将tabel表的布局给打乱了，如果给tabel的父级进行限制，则这个表会进行滚动。。。 在css上设置如下代码就可以了 table tb...
table固定头部，表格tbody可上下左右滑动
weixin_30423977的博客
11-03 684
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class="table_box_big"> <div class="table_box"> <table> <thead> <tr> <th&...
使用layui流加载，CSS解决如何固定表头，以及解决表格表头和表格内容对不齐问题
wr793455561的博客
10-15 9343
先上HTML部分的代码： &lt;table class="layui-table"&gt; &lt;thead class="top-head"&gt; &lt;tr&gt; @for(var item in zkColumnDescs){ @if(item.field != 'equipId'){ &lt;th class=...
原生table控制tbody滚动而thead不滚动
weixin_30437847的博客
09-01 329
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>威易网CSS教程</title> <style> table tbody { d...
table表格，thead固定，tbody滚动条
Gleason
08-03 1万+
如上图所示 之前 写的样式 不变, 想让 thead 固定 不动, tbody 增加滚动条,在样式中添加如下代码   table tbody { display: block; height: 195px; overflow-y: scroll; } table thead, tbody tr { ...
elementui表格固定表头 内容滚动
最新发布
04-27
要在 ElementUI 表格中固定表头并且内容可以滚动，可以使用 `el-table` 的 `height` 属性来指定表格高度，然后使用 `max-height` 属性来限制表格内容的最大高度。同时，使用 `fixed` 属性来固定表头。 例如： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值