html – How to prevent css’ ::after selector from creating a new column in a table


I have a HTML table and I want to add a ::after pseudo-element in the a row (tr) so I can have a border that always stays on top.

However, adding ::after selector creates a new column in the table, even though the position is set to absolute.

css for the tr:

tbody tr {
  display: table-row;
  position: relative;
}

tbody tr.selected-row::after {
  content: '';

  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  border-width: 2px;
  border-color: rgb(59, 130, 246); 
}

[The table rendered][1]
[1]: https://i.stack.imgur.com/3EaSh.png



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here