CODEWITHSUNDEEP
css
Pierre Carbonnelle
Pierre Carbonnelle

Reputation: 2625

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>

Upvotes: 0

Views: 83

Answers (1)

jcaron
jcaron

Reputation: 17720

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

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

Upvotes: 1

Related Questions