user474491 user474491 - 2 months ago 6
CSS Question

how to position an "Insert row" button in front of each horizontal row border of a table?

I have an html table, and I want to show an "insert row" button properly centered, on the left of each horizontal border line, i.e. between each pair of rows. This is to make it clear where the row will be inserted.

How can I do that in css ?

If I simply add the buttons in cells, they are not properly positionned vertically next to the border lines. Also, I would need 3 buttons, as the row can be inserted at 3 different places. (I also want the button to appear only when hovering over them, but that's another issue)

<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

HTML

<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>

CSS

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;
}

Fiddle

Note that the positioning using specific pixel values is of course probably not the best way of doing this, but you get the idea.

Comments