自己写了个table 固定table头部 使表可以滚动 注意稍不注意表头和表体就会出现不对齐的情况

最新推荐文章于 2024-06-27 11:33:07 发布
最新推荐文章于 2024-06-27 11:33:07 发布
阅读量5.3k 收藏 1
点赞数
文章标签： table class border html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kid2013/article/details/7956179
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.tb td{border:solid 1px black;}
.tb th{border:solid 1px black;}
.tbdiv{overflow: hidden}
</style>
<script type="text/javascript">

function inittable(id){
    var tablehead=document.getElementById(id+'_head');
    var tablebody=document.getElementById(id+'_body');
    
    for(var i=0;i<tablehead.rows[0].cells.length;i++){
        tablebody.rows[0].cells[i].style.width=(tablehead.rows[0].cells[i].offsetWidth-2)+'px';
        tablebody.rows[0].cells[i].childNodes[0].style.width=(tablehead.rows[0].cells[i].scrollWidth-2)+'px';
    }
    
}

</script>

<title>Insert title here</title>
</head>
<body>

<div>
<table id="table1_head"   width="300px" cellpadding= "0 " cellspacing= "0 " class="tb">
    <tr>
        <th style="width: 30px">1</th><th>2</th><th >3</th><th >4</th>
    </tr>
    
</table>
<div style="overflow-y:auto ; height:100px; width:317px " >
<table id="table1_body" width="300px" cellpadding= "0 " cellspacing= "0 " class="tb">
    <tr>
        <td><div  class="tbdiv" >1</div></td>
        <td><div  class="tbdiv" title="此行会超出界限 撑开div 如果是一般的td在火狐中会出现和头部不对齐的情况" >tttttttttttttttttt</div></td>
        <td><div  class="tbdiv" >3</div></td>
        <td><div  class="tbdiv" >4</div></td>
    </tr>
    <tr>
        <td><div  class="tbdiv" >1</div></td>
        <td><div  class="tbdiv" >2</div></td>
        <td><div  class="tbdiv" >3</div></td>
        <td><div  class="tbdiv" >4</div></td>
    </tr>
    <tr>
        <td><div  class="tbdiv" >1</div></td>
        <td><div  class="tbdiv" >2</div></td>
        <td><div  class="tbdiv" >3</div></td>
        <td><div  class="tbdiv" >4</div></td>
    </tr>
    <tr>
        <td><div  class="tbdiv" >1</div></td>
        <td><div  class="tbdiv" >2</div></td>
        <td><div  class="tbdiv" >3</div></td>
        <td><div  class="tbdiv" >4</div></td>
    </tr>
    <tr>
        <td><div  class="tbdiv" >1</div></td>
        <td><div  class="tbdiv" >2</div></td>
        <td><div  class="tbdiv" >3</div></td>
        <td><div  class="tbdiv" >4</div></td>
    </tr>
    <tr>
        <td><div  class="tbdiv" >1</div></td>
        <td><div  class="tbdiv" >2</div></td>
        <td><div  class="tbdiv" >3</div></td>
        <td><div  class="tbdiv" >4</div></td>
    </tr>
    
</table>
<script type="text/javascript">
inittable('table1');
</script>
</div>



</div>



</body>

</html>



注意事项：

    如果是英文 会撑开div 这里只是对内容进行了隐藏  如果是中文 会自动换行



kid2012
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table内容出现滚动条和表头对齐问题
05-09
table内容出现滚动条和表头对齐
Table的思索(二):表头固定而内容滚动的表格
热门推荐
甘焕的博客
08-03 2万+
产品要求表格的表头固定，而内容在超出table的高度后，还能自由滚动，难度较高，本文尝试了几种常用方法，但都经历了失败，最后给出了一种可行的解决方案。
bootstrap-table表格表头与内容对不齐问题
最新发布
千里之行，始于足下
06-27 357
bootstrap-table表格表头与内容对不齐问题
bootstrap table固定表头 以及 表头与表体对齐
weixin_42213796的博客
04-28 2367
1.表头与表体对齐 第一步：给table加 table-layout:fixed .bootstrap-table .table{ table-layout:fixed; } 第二部：给表的每一列加宽度 columns: [{ checkbox : true, title : '复选框', field : 'pkid1', hali...
bootstrap table 修改table内容时设置表头与表格对齐
weixin_30877227的博客
09-14 495
第一：取消表头初始化解决表头和内容不对齐问题，取消后表头将不固定。 在你对应的js（bootstrap-table.min.js或bootstrap-table.js，我用的bootstrap-table.min.js，故以下都是以bootstrap-table.min.js为准）引用中注释如下两句代码： this.resetHeader(), b += this.$header.outerH...
jsp table实现表头固定，并且表头和内容对齐
keep12moving的博客
12-18 4590
overflow-y:scroll 实现滚动条，标签使表头和内容对齐，代码如下 航线 航班号 起飞时刻 机型 标准票价 单班飞行小时 班次 提供座位数 合计旅客数 合计收入 班收入 客座率 票价水平 人均票价 标准票价客座率 座公里收入 客公里
bootstrap table列和表头对不齐的解决方法
10-16
在实际使用中，可能会遇到列和表头对不齐的问题，尤其是在设置了固定表格高度并出现滚动条的情况下。这种问题通常是由于数据列中的滚动条占据了额外的宽度，导致表头和数据列的div容器宽度不一致。 要解决Bootstrap...
两个table实现固定表头拖动时仅限表体移动
09-25
标题“两个table实现固定表头拖动时仅限表体移动”描述了一种利用两个表格来完成这一功能的技术。这个方法的关键在于将表头和表体分开，然后通过CSS定位来实现滚动行为的控制。 首先，我们需要理解这种方法的基本...
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
10-16
在Vue.js应用中，开发一个具有滚动功能的表格并保持表头与列对齐是一项常见的需求。当表格列的宽度不同时，这个问题变得更加复杂。本文将详细介绍如何在Vue中实现这个功能，主要涉及以下几个关键点： 1. **监听滚动...
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
为了实现固定列和表头的效果，我们需要将原本的表格拆分成三个部分：固定的第一列（如时间戳或ID），中间可滚动的列（包含主要数据），以及固定的最后一列（如操作按钮）。通过CSS的`float`属性，我们可以使这三个...
BootStrap Table 设置height表头与内容无法对齐的问题
08-31
主要介绍了BootStrap Table 设置height表头与内容无法对齐的问题,需要的朋友可以参考下
css 和表头对齐 表格_bootstrap table 修改table内容时设置表头与表格对齐
weixin_39744230的博客
01-12 174
第一：取消表头初始化解决表头和内容不对齐问题，取消后表头将不固定。在你对应的js(bootstrap-table.min.js或bootstrap-table.js，我用的bootstrap-table.min.js，故以下都是以bootstrap-table.min.js为准)引用中注释如下两句代码：this.resetHeader(), b += this.$header.outerHeigh...
实现table表头固定 内容滚动效果
gwpJava的专栏
11-21 7253
html>      head>      style type="text/css">          /*所有内容都在这个DIV内*/          div.all {              border: 3px solid #FF00FF;              width: 80%; /*这个宽度可根据实际需要改变*/              clear: right; 
固定表头与表格内容对齐 表格内容滚动
Bug_LGH的博客
11-21 560
序号           我只是用来测试的           我只是用来测试的           我只是用来测试的           我来测试的           我来测试的                                                                           1            
el-table设置表格表头和内容的对齐方式及样式
ysw716的博客
01-23 1354
el-table设置表格表头和内容的对齐方式及样式
解决element-ui的table表格的表头与内容列对齐问题
huihuiliu_的博客
11-28 5173
直接上代码，就是在style上加一个样式，如果多个页面涉及的表格过多，可定义一个全局样式 <style> /* 解决element-ui的table表格控件表头与内容列不对齐问题 */ .el-table th.gutter{ display: table-cell!important; } </style> 这样就大功告成啦！！！！！！对齐啦！！！ ...
css 实现table表头固定，内容进行滚动 （两种方式）
让心在跳动
06-11 9665
首先要明确功能需求： 固定表头 table垂直滚动条 table列宽自适应 第一种方式：纯css <!DOCTYPE html> <!-- 不加此标签，IE不生效 --> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="pragma" content="no-cache"> <meta
bootstrap-table 表头和内容对不齐
DAASD1212的博客
01-17 166
问题： bootstrap-table.js 找到 BootstrapTable.prototype.resetView if (this.options.showHeader && this.options.height) { this.$tableHeader.show(); //注释掉下面两行 取消表头初始化解决表头和内容不对齐问...
ant design 的Table组件固定表头时不对齐
06-03
出现这种情况可能是因为表格中某些列的宽度没有设置或者设置不当导致的。你可以尝试以下方法来解决这个问题： 1. 设置表格每列的宽度，使其能够正确地对齐。 2. 调整表格的样式，使表格中的每列都能够正确地对齐。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值