javascript - 关于在 table 中给 td 设定 position:absolute 引起的 rowspan 失效的问题-PHP中文网问答

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

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

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

下面是具体的代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .table{width: 1000px;overflow-x: scroll;margin:auto;}
        table{border:1px solid black;}
        table p{width: 200px;}
        td{width: 200px;text-align: center; border:1px solid blue; background-color:yellow;}
    </style>
</head>
<body>
<p class="table" id="fixedTable">
    <table>
        <thead>
            <tr>
                <td style="position: absolute; width:200px;"><p>表头1</p></td>
                <td style="position: absolute; width:200px;"><p>表头2</p></td>
                <td><p>表头3</p></td>
                <td><p>表头4</p></td>
                <td><p>表头5</p></td>
                <td><p>表头6</p></td>
                <td><p>表头7</p></td>
                <td><p>表头8</p></td>
            </tr>
        </thead>
        <tr>
            <td style="position: absolute; width:200px;">AAA</td>
            <td style="position: absolute; width:200px;">BBB</td>
            <td>CCC</td>
            <td>DDD</td>
            <td>EEE</td>
            <td>FFF</td>
            <td>GGG</td>
            <td>HHH</td>
        </tr>
    </table>
</p>
</body>

<script type="text/javascript">
    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)
            }
        }
    }
</script>
</html>

具体效果如下：

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

        <thead>
            <tr>
                <td style="position: absolute; width:200px;" rowspan="2"><p>表头一1</p></td>
                <td style="position: absolute; width:200px;" rowspan="2"><p>表头一2</p></td>
                <td><p>表头一3</p></td>
                <td><p>表头一4</p></td>
                <td><p>表头一5</p></td>
                <td><p>表头一6</p></td>
                <td><p>表头一7</p></td>
                <td><p>表头一8</p></td>
            </tr>
            <tr>
                <td><p>表头二1</p></td>
                <td><p>表头二2</p></td>
                <td><p>表头二3</p></td>
                <td><p>表头二4</p></td>
                <td><p>表头二5</p></td>
                <td><p>表头二6</p></td>
            </tr>
        </thead>

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

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