如何在表格的每個水平行邊框的前面放置「插入行」按鈕？

Question

我有一個html表格，我想在每個水平邊框線的左邊，即每對行之間顯示一個正確居中的「插入行」按鈕。這是爲了清楚該行將被插入的位置。

我該怎麼做，在CSS？

如果我只是在單元格中添加按鈕，他們沒有正確定位垂直旁邊的邊界線。此外，我需要3個按鈕，因爲該行可以在3個不同的地方插入。 （我也想鼠標懸停在當按鈕，僅出現，但這是另一個問題）

<table> 
    <tr> 
    <td> 
     <button>insert</button> 
    </td> 
    <td> 
     first row 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <button>insert</button> 
    </td> 
    <td> 
     second row, <br>on multiple lines 
    </td> 
    </tr> 
</table> 

Answer 1

table, 
 
td { 
 
    border: solid 1px red; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    margin-left: 60px; 
 
} 
 
td { 
 
    position: relative; 
 
} 
 
td button { 
 
    position: absolute; 
 
    top: 100%; 
 
    margin-top: -8px; 
 
    left: 0; 
 
    margin-left: -60px; 
 
} 
 
td button::after { 
 
    position: absolute; 
 
    content: '▸'; 
 
    right: 0; 
 
    margin-right: -10px; 
 
    top: 1px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <button>Insert</button> 
 
     first row 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <button>Insert</button> 
 
     second row, 
 
     <br>on multiple lines 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     third row 
 
    </td> 
 
    </tr> 
 
</table>

Fiddle

注意，使用特定的像素值的定位是當然可能不是這樣做的最好方式，但你明白了。