表格行内绝对定位的内容

Question

我需要显示一些表格数据。我有行产品选项和规格，并且我dinamically添加新行。另外，我可以删除一行，然后出现问题。

每行可能有N列，这可能会导致一些溢出（这对溢出没有问题）。

我的问题如下：我想在每行中显示一个“删除”按钮，只有在该行被徘徊时才会出现该按钮。我的想法是用position: relative创建一个<tr>，但我在HTML规范中发现这是不可能的。

这是一个codepen，显示了我想要实现的一点点。

https://codepen.io/buenopw/pen/YQbXOq

谢谢！

PS：我想避免使用JavaScript，如果可能的话。

编辑：

另一个重要的事情是：删除按钮必须始终对用户可见，即使在X轴滚动，它应该永远停留在同一个地方。

Answer 1

是的，这是可能的，即使没有JavaScript的

这里的基本解决

<style> 
    tr button{ 
     display: none; 
    } 
    tr{ 
     height: 30px; 
    } 
    tr:hover > td:last-child > button{ 
     display: block; 
    } 
</style> 

<table cellspacing="0px"> 
    <tr> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td> 
      <button>Delete row</button> 
     </td> 
    </tr> 
    <tr> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td> 
      <button>Delete row</button> 
     </td> 
    </tr> 
    <tr> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td> 
      <button>Delete row</button> 
     </td> 
    </tr> 
</table> 

然而，为了让其更加灵活，使得button将始终定位在了最右边的侧屏幕（就像你想要的），我会建议你使用div，这和现在table

例如

<style> 
    .table-row{ 
     height: 30px; 
     position: relative; 
     background: #fee; 
    } 
    .table-row-data{ 
     margin-right: 100px; //to ensure the button does not cover the data 
    } 
    .table-row-data > div{ 
     width: 25%; 
     float: left; 
    } 
    .table-row-delete{ 
     width: 100px; 
     height: 30px; 
     position: absolute; 
     right: 0px; 
     top: 0px; 
     display: none; 
    } 
    .table-row:hover > .table-row-delete{ 
     display: block; 
    } 
</style> 

<div class="table"> 
    <div class="table-row"> 
     <div class="table-row-data"> 
      <div>Some data</div> 
      <div>Some data</div> 
      <div>Some data</div> 
      <div>Some data</div> 
     </div> 
     <div class="table-row-delete"> 
      <button>Delete row</button> 
     </div> 
    </div> 
    <div class="table-row"> 
     <div class="table-row-data"> 
      <div>Some data</div> 
      <div>Some data</div> 
      <div>Some data</div> 
      <div>Some data</div> 
     </div> 
     <div class="table-row-delete"> 
      <button>Delete row</button> 
     </div> 
    </div> 
    <div class="table-row"> 
     <div class="table-row-data"> 
      <div>Some data</div> 
      <div>Some data</div> 
      <div>Some data</div> 
      <div>Some data</div> 
     </div> 
     <div class="table-row-delete"> 
      <button>Delete row</button> 
     </div> 
    </div> 
</div> 

您可以将上面的所有代码粘贴到一个html文件中并运行它，以便您可以看到差异。