表格行內絕對定位的內容

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文件中並運行它，以便您可以看到差異。