如何保持绝对定位在表格中的表格单元格并对齐表格标题

问题描述：

我正在尝试使用this tutorial以允许在我编写的矩阵窗口小部件上进行高效滚动。但是，它在创建的无限滚动节点上使用绝对定位。我的节点是表行和列。这将所有单元格从表流中取出。有没有办法让绝对定位的表格单元流动？如何保持绝对定位在表格中的表格单元格并对齐表格标题

我知道可以绝对定位一个div，并使用外部div上的相对位置将其保持在另一个div环绕的流中。类似：

<div style="position:relative"><div style="position:absolute;top:0;left:0"></div></div>

然而，在这种情况下，由于外HTML是一个表本体具有头部和内HTML为表中的行，将无法正常工作。有什么办法可以将相对定位应用到表格的某个部分来强制绝对定位的表格单元留在表格中并保持其与表格标题的对齐？

我试图施加在围绕像绝对定位的行表中的各部分相对定位：

<table border="1"> 
 
    <thead><tr><th>header</th><th>another header</th></tr></thead> 
 
    <tbody style="position:relative"> 
 
     
 
     <tr style="position:absolute"> 
 
      <td><input type="checkbox"/></td> 
 
      <td><input type="checkbox"/></td> 
 
     </tr> 
 
     <tr style="position:absolute"> 
 
      <td><input type="checkbox"/></td> 
 
      <td><input type="checkbox"/></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

是否有可能修改上面的片段，从而将细胞留在流与thead部分和桌子的其余部分？相同的相对定位技巧，适用于div，似乎不适用于表格内容。

Downvoters，而不是仅仅downvote你能告诉我，为什么这个问题是不是一个好问题，所以我可以改善呢？ –

嗨，我还没有下降，但就你的问题而言，为了让人们回答你的问题，你应该先说明你到目前为止所尝试过的。一个HTML输出和一些Css会很好。 –

感谢您的回复！我当然已经尝试过，并会补充说。 –

答

我认为这是你想要的。（如果您使用的聚合物的无限铁列表）

<style> 
    :host { 
     display: block 
    } 
    #scrollzone { 
     display:flex; 
     flex-direction:column; 
     overflow-y:scroll; 
    } 
    .header { 
     background-color:red; 
     height:22px; 
     width:100%; 
     position:sticky; 
     top:0; 
    } 
    .footer { 
     background-color:blue; 
     height:22px; 
     width:100%; 
     position:sticky; 
     bottom:0; 
    } 
    iron-list { 
     flex: 1 1 auto; 
    } 
</style> 
<div id="scrollzone"> 
    <div class="header">header</div> 
    <iron-list items="{{items}}" scroll-target="scrollzone"> 
     <template> 
      <div>{{item.name}}</div> 
     </template> 
    </iron-list> 
    <div class="footer">footer</div> 
</div>

如何保持绝对定位在表格中的表格单元格并对齐表格标题

相关推荐