Css 在表格中隐藏绝对伪元素

发布于05月28日

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

原始表在同一单元格中包含原始价格和折扣价格，仅通过第一个数字的删除线区分.类似于:

2,50罢工>2,13

通过对offer price子类应用不同的样式，并使用|个字符和position:absolute个字符作为显示参数，使用:before个伪元素制作分隔线，我成功地将它们分开.

表格通常最多有20-25行.由于间距的原因，它们有一个带垂直滚动条的max-height，以便在内容广泛的情况下查看隐藏的行.在这些情况下，由于第二幅图中:before个元素中的position:absolute个元素，分隔线在表格末端下方仍然可见.

我try 了几次更改，但没有任何解决方案.将位置更改为relative将覆盖多个伪元素的显示选项.有其他 Select 吗？

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>

重大变化

已删除absolute

除前<td>个外，每个<td>个都是flex容器

<bdi>、<span>和<span>::before都是inline-block

在<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>

Css 在表格中隐藏绝对伪元素

推荐答案

问题

重大变化

Css相关问答推荐

如何允许在bslb中 Select 输入重叠卡片？

如何以Angular 将下拉面板的宽度与其文本框对齐

CSS子网格不显示行间距

当具有外部高度的网格项溢出时，为什么溢出滚动端口填充不应用于网格容器？

Nuxt 3+sass：不能将包含路径与@IMPORT和@USE一起使用

无法在 React 组件 (TypeScript) 中应用 Tailwind CSS 类

如何将 div 和 img 包装在 display：flex 容器中

包含 N 个 React 组件的砌体网格

当滚动量较小时，在滚动问题上动画粘性导航

同时实现渐变文本和闪光文本效果是否可行？

没有字母间距的CSS悬停边框

在 CSS 中，如何用破折号填充段落中每一行的空白区域？

我想在视频上使用混合混合模式的 svg

before 元素的过渡效果

Tailwind css 和 Next.js 导航组件 z-index 不工作

如何使用rvest中的 node 和类提取网页数据

子组件的css会影响整个页面

使用 CSS 剪辑/裁剪背景图像

React - 防止父子事件触发

在无序列表中的项目之后添加管道分隔符，除非该项目是最后一行