旧答案

Question

在桌面上我希望前2列固定在固定位置，因此我必须将position:absolute添加到前2个<td>标记中。我想合并第一行和第二行。因此，我在两列中都添加了rowspan="2"，但遗憾的是，rowspan无法使用<td>处理position:absolute。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>td with position:absolute</title>
    <style type="text/css">
        .table{margin:auto; width: 1000px; overflow: visible;}
        td{text-align: center; background-color: yellow; border:1px solid black;}
        table div{width:200px;}
    </style>
</head>
<body>
    <div class="table">
        <table>
            <thead>
            <tr>
                <!-- You can remove the attribute "position:absolute" to see the result -->
                <td style="position:absolute;" rowspan="2"><div>Table head Row 1</div></td>
                <td><div>Table head Row 2</div></td>
                <td><div>Table head Row 3</div></td>
                <td><div>Table head Row 4</div></td>
                <td><div>Table head Row 5</div></td>
                <td><div>Table head Row 6</div></td>
            </tr>
            <tr>
                <td><div>Table head Row 2</div></td>
                <td><div>Table head Row 3</div></td>
                <td><div>Table head Row 4</div></td>
                <td><div>Table head Row 5</div></td>
                <td><div>Table head Row 6</div></td>
            </tr>
            </thead>
        </table>
    </div>
</body>
</html>

Screenshot: Result with position:absolute

Plunker: position: absolute applied

Screenshot: Result without position:absolute

Plunker: position: absolute not applied

Answer 1

你做不到。原因如下：

根据第9.7节中的规则，表格单元格的定位和浮动可能导致它们不再是表格单元格。使用浮动时，匿名表对象上的规则也可能导致创建匿名单元对象。 https://www.w3.org/TR/2006/WD-CSS21-20060411/tables.html#q7

您尝试用于粘性列的position:absolute黑客会导致那些定位的cels从表中移除并被绘制为普通的DOM元素。因此，任何特定于表的标记（例如rowspan）将不再适用于这些元素。

（顺便提一下，您已经省略了样本中的一些代码，这些代码是该hack工作所必需的：该表必须位于overflow-x:scroll而不是visible的容器中。）

我认为你在这里做的最好（没有重新设计，首先不需要rowpans）是通过将绝对定位的表格单元格的高度设置为两个表格行的高度来模拟行数，并留下额外的，第二行中的非定位单元格（将隐藏在绝对定位的单元格后面。）

填充和边距会使这有点不精确和脆弱，当然只有表行具有可预测的高度时才会起作用，但我不知道有任何更好的方法。

        .table {
          overflow: scroll;
          margin:0;
          padding:0;
        }
        td {
          text-align: center;
          background-color: yellow;
          border: 1px solid;
          height: 1.2em;
        }
        table div {
          width: 200px;
        }
        .sticky {
          position: absolute;
        }
        .tall {height: 2.8em}

    <div class="table">
        <table>
            <thead>
            <tr>
                <td class="sticky tall"><div>Table head Row 1</div></td>
                <td><div>Table head Row 2</div></td>
                <td><div>Table head Row 3</div></td>
                <td><div>Table head Row 4</div></td>
                <td><div>Table head Row 5</div></td>
                <td><div>Table head Row 6</div></td>
            </tr>
            <tr>
                <td><div><!-- will be hidden --></div></td>
                <td><div>Table head Row 2</div></td>
                <td><div>Table head Row 3</div></td>
                <td><div>Table head Row 4</div></td>
                <td><div>Table head Row 5</div></td>
                <td><div>Table head Row 6</div></td>
            </tr>
            </thead>
        </table>
    </div>

Answer 2

问题：

如何使用rowspan将<td>与position:absolute合并？

解决方案：

出于某种原因，我无法弄清为什么 position: absolute禁止rowspan。幸运的是，OP要求。。

将表格改为2 inline-table s。

#fixedTable前两列现在是一个2列表。
#railTable其余6列现在是第二个表。

#fixedTable是：
固定在x（左）：0，y（上）：8px
z-indexed at 1
两列上的行显示

#railTable是：
相对定位
位于x（左）：415px，即#fixedTable的宽度

包含两个表.tables的div是：
相对定位
具有与overflow-x:scroll一致的相对长度，允许#railTable始终向左和向右滑动它的全长而不会被剪裁（当然它应该在运动中受限制视口变得比415px窄，这是#fixedtable的宽度。

诀窍是：

      min-width: 100em;

因此当.tables父（即<body>）减少或增加时，100em的缩放也是如此。默认情况下，100em = 1600px，这是两个表的端到端宽度（不计算边框宽度）。

Plunker

旧答案

更改

将<td>更改为position: relative，使其不受absolute的限制，并添加vertical-align: top;以更好地显示内容。

解释

OP没有解释为什么<td>需要定位。

position需要z-index属性吗？

如果是，那么relative就像absolute一样好。

移动<td>需要特定的x，y坐标吗？

如果是这样，relative定位元素比absolute定位元素更容易移动。

如何使用rowspan来合并a position：absolute？

2 个答案:

问题：

解决方案：

Plunker

旧答案

更改

解释

Plunker