Static pseudo-element within a cell

Question

The pseudo-element bar line is displayed correctly when the figures contain the same amount of numbers but fails when the figures are different, for example in prices without decimals.

Does it have a solution?

table {border-collapse: collapse;
width: fit-content;
margin: 4rem auto 3rem;
max-height: 205px;
overflow-y: auto;
display: block;
border-top: 2px solid #35D0CD;
border-bottom: 2px solid #35D0CD;
}

th {background:black; color:white; position: sticky; top:0;}

td {border: 2px;
border-style: solid;
border-color: #35D0CD;
padding: 0 2rem; 
text-align:center;
}

bdi {color:blue; text-decoration: line-through;
}

span {color:red;}

bdi:after {content: "|";
margin: 0 1.75rem;
font-size: 1.5rem;
color: #35D0CD;
line-height: 0;
display: inline-block;
transform: scale(0.7, 1.4);}


  
Price
2,50 €2,13 €
2,20 €2 €
2,50 €2,13 €
2,50 €2,13 €
22,50 €21,13 €
2,50 €2,13 €
2,50 €2,13 €
200,50 €180,13 €
2,50 €2,13 €
2,50 €2,13 €
22,50 €21,13 €
2,50 €2,13 €

Cohars · Answer

Made some changes to make it simpler and more reliable. I sued box-sizing: border-box; to make sizes, padding and borders easier (ie: width: 200px will mean 200px no matter how big the padding and borders).

Then I made the td full-size (no padding, and width 100%), so it's children are easier to manipulate.

I made the span and bdi both inline-blocks with a 50% width, the text-align center is applied to them and not their parent.

I was then able to remove the :after and simply set a border-right on the bdi

table, th, td, bdi, span {
  box-sizing: border-box;
}

table {
  display: block;
  margin: 4rem auto 3rem;
  width: fit-content;
  max-height: 205px;
  border-collapse: collapse;
  border: 2px solid #35d0cd;
  border-bottom: none;
  overflow-y: auto;
}

th, td {
  border-bottom: 2px solid #35d0cd;
}

th {
  position: sticky;
  top: 0;
  background: black;
  color: white;
}

td {
  width: 100%;
  padding: 0;
}

bdi, span {
  height: 100%;
  display: inline-block;
  width: 50%;
  text-align: center;
  padding: 0 1em;
}

bdi {
  border-right: solid 2px #35d0cd;
  color: blue;
  text-decoration: line-through;
}

span {
  color: red;
}


  

  Price


  2,502,13


  2,202


  2,502,13


  2,502,13


  2,5021,13


  2,502


  2,502,13


  200,50180,13


  2,502,13


  2,502,13


  22,5021,13


  2,502,13

Static pseudo-element within a cell

1 Answers