在 table 中隐藏绝对伪元素

Question

我有一个价格table，我无法访问它的内容，我只能通过CSS修改它。

原价table在同一个单元格中有原价和折扣价，只是用第一个数字的删除线来区分。类似的东西：

~~2,50~~2,13

我设法通过对报价子类应用不同的样式并使用 | 字符和 [=15= 应用 :before 伪元素制作分隔线来将它们分开] 显示参数。它完美运行。

表格通常最多有 20-25 行。由于间距原因，他们有一个 max-height 和一个垂直滚动条，以便在内容过多的情况下查看隐藏的行。在这些情况下，由于第二个图的 :before 元素的 position:absolute，分隔线在 table.

末尾下方仍然可见

我试过几次修改都没有解决。将位置更改为 relative 会覆盖多个伪元素的显示选项。还有其他选择吗？

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>

Answer 1

问题

您是正确的，| 是因为 absolute 而暴露的，但如果 line-height 不是 0，这可能不会成为问题，因为其中所有 | 都被垂直推出，font-size 是默认 font-size

的两倍

主要变化

已移除absolute
除第一个 <td> 外，每个 <td> 都是弹性容器
所有 <bdi>、<span> 和 <span>::before 都是 inline-blocks
在 <span>::before

line-height: 0

0.65

将 <span>::before padding-bottom 调整为 0.5ch 以缩小顶部的差距。

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>

在 table 中隐藏绝对伪元素

Hide absolute pseudo-element within a table

css

html-table

absolute

pseudo-element

问题

主要变化