rowspan无效_关于在 table 中给 td 设定 position:absolute 引起的 rowspan 失效的问题

在这个表格中，表头一1 和表头二2 这两列是固定的，目前想到的解决方案是，使用 position:absolute; 但是，这个绝对定位不能相对于 table 来定位，因为这样无法实现冻结这两列的效果。

我们只能通过它相对于屏幕的最左来固定第一列，同时通过 JS 来计算出第二列相对于屏幕的最左的距离，并给这列加上一个属性 offsetLeft；

随后给第三列(这是不需要固定的列)一个 paddingLeft 值来防止它被因为设置 position:absolute 而脱离文档流的固定列所覆盖。

下面是具体的代码：

.table{width: 1000px;overflow-x: scroll;margin:auto;}

table{border:1px solid black;}

table div{width: 200px;}

td{width: 200px;text-align: center; border:1px solid blue; background-color:yellow;}

表头1

表头2

表头3

表头4

表头5

表头6

表头7

表头8

AAABBBCCCDDDEEEFFFGGGHHH

var trs = document.getElementById('fixedTable').getElementsByTagName('tr')

for(var i = 0; i < trs.length; i++){

//第 i 列

var tr = trs[i]

//计算所有固定列的总宽度

var totalWidthOfFixedColumn = 0

//计算列需要相对于屏幕左边的 offset

var offsetLeft = document.getElementById('fixedTable').getElementsByTagName('td')[0].offsetLeft

//第 i 列的所有单元格

var tds = tr.getElementsByTagName('td')

for(var j = 0; j <= 2 && j < tds.length; j++){

//第 i 列的第 j 个单元格

var td = tds[j]

//当前单元格宽度

var currentTdWidth = parseInt(td.style.width.slice(0, -2))

if(j === 2){

//当 j == 2 时，说明已经处理完所有固定的列，需要给这一列一个 paddingLeft 防止因为 position:absolute 脱离文档流

//导致的该列被其他固定列锁覆盖

td.style.paddingLeft = totalWidthOfFixedColumn + 'px';

continue

}

totalWidthOfFixedColumn += currentTdWidth

td.style.left = offsetLeft + 'px'

try{

offsetLeft += currentTdWidth

}catch(e){

console.error(e)

}

具体效果如下：

随后，我将表头更改为如下：

表头一1

表头一2

表头一3

表头一4

表头一5

表头一6

表头一7

表头一8

表头二1

表头二2

表头二3

表头二4

表头二5

表头二6

但是效果却成了如下形式：

觉得应该还是因为前两列设置了 position:absolute 导致的元素脱离文档流引起的，但是不知道怎么解决，希望各位大神能不吝赐教。

rowspan无效_关于在 table 中给 td 设定 position:absolute 引起的 rowspan 失效的问题相关推荐

[html] table中给td设置宽度无效怎么解决？
[html] table中给td设置宽度无效怎么解决? 默认是列宽度由单元格内容设定 table 添加css tableLayout :fixed; 个人简介我是歌谣,欢迎和大家一起交流前后端知识. ...
html表格td的内容修改,点击table中的td，修改td中的内容功能实现
点击table中的td,修改td中的内容前段时间,需要搭建演示页面,有个功能是实现点击表格中的某一格,能够修改对应格子中的内容,一开始不知道怎么写,在网上找了一下,自己再整合了一下,功能实现的代码如 ...
table中的td表示table data（表格数据），tr表示table row（表格行），th表示table head（表格头）
<table>中的 <td>表示table data(表格数据) <tr>表示table row(表格行) <th>表示table head(表格头)
表格table中的td标签中的内容太多，影响整体外观，不美观。将一部分内容隐藏起来，用省略号代替
表格table中的td标签中的内容太多,影响整体外观,不美观.将一部分内容隐藏起来,用省略号代替. 招式:1.在table标签中加上style="table-layout: fixed;&q ...
设置table中的td宽度不同
类似站内短信的形式的一个table,想要的实现结果如下格式: 刚开始觉得"这里是名字"的td设置宽度为20%就可以了,代码如下: <table><tr class ...
table中的td内容过长显示为固定长度，多余部分用省略号代替
如何使td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 给table中必须设置属性: table-layout: fixed; 然后给 td 设置: white-spac ...
html表格td点击事件,监听layui中的table中的td点击事件
上图就是用layui生成的一个table表格; 在这里我们给td绑定class,再通过jq的方式去监听是不可行的; 会监听不到事件; 不过在layui中,给了监听方法,并且还可以获取到该行所有的数据 ...
javascript做的一个根据table中某个td的值为日期时的倒计时
JavaScript代码: <script>window.onload = window.onload = function () { getTdValue(); }//根据传过来的天数( ...
循环遍历获取table中的td,tr
贴上页面div <div align="center"><table id="tab" border="1" align= ...

rowspan无效_关于在 table 中给 td 设定 position:absolute 引起的 rowspan 失效的问题

rowspan无效_关于在 table 中给 td 设定 position:absolute 引起的 rowspan 失效的问题相关推荐

最新文章

热门文章