Search code examples
csshtml-tablepseudo-elementabsolute

Hide absolute pseudo-element within a table

I have a price table in which I cannot access its content, I can only modify it via CSS.

The original table has the original price and the discount price together in the same cell, only differentiated by the strikethrough of the first figure. Something like that:

2,502,13

I have managed to separate them by applying a different style to the offer price subclass and making a divider line applying a :before pseudo-element, using the | character and position:absolute for display parameters. It works perfectly.

Tables usually have a maximum of 20-25 rows. For spacing reasons, they have a max-height with a vertical scroll bar to see the hidden rows in case of extensive content. In these cases, and due to the position:absolute of the :before element of the second figure, the divider line remains visible below the end of the table.

I have tried several changes without any solution. Changing the position to relative overrides several of the pseudo-element's display options. Any alternative?

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 {padding-left:4rem; color:red}

span:before {content: "|";
    margin-left: -2rem;
    font-size: 2rem;
    color: #35D0CD;
    line-height: 0%;
    position: absolute;
    transform: scale(0.2, 1);
  margin-top: 0.65rem;}
<div>
  <table>
<tr><th>Price</th></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
  

  </table>
  
</div>

Solution

  • Problem

    You were correct in that the | was exposed because of absolute but it probably wouldn't be an issue if the line-height wasn't 0 because of that all of the | was pushed out vertically and it's font-size was twice the size of the default font-size

    Major Changes

    • Removed absolute
    • Each <td> with the exception of the first <td> is a flex container
    • All <bdi>, <span>, and <span>::before are inline-blocks
    • Changed line-height: 0 to 0.65 on <span>::before
    • Adjusted <span>::before padding-bottom to 0.5ch to close the gap on top.

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

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

bdi {
  display: inline-block;
  margin-right: -4.25ch;
  padding-top: 0.15ch;
  color: blue;
  text-decoration: line-through;
  vertical-align: text-bottom;
}

span {
  display: inline-block;
  padding-left: 4rem;
  color: red;
  vertical-align: text-bottom;
}

span:before {
  content: "|";
  display: inline-block;
  padding-right: 2.5ch;
  padding-bottom: 0.5ch;
  font-size: 1.45rem;
  line-height: 0.65;
  color: #35D0CD;
}

tr:first-of-type td {
  display: table-cell;
  text-align: center
}
    <div>
  <table>
<tr><td>Price</td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
<tr><td><bdi>2,50</bdi><span>2,13</span></td></tr>
  </table>
</div>