隐藏除第一个单元格之外的所有单元格内容

Question

我们的在线商店有不同的价格 table。这些单元格显示原价、销售价格和折扣百分比。我们使用 this script 来获得折扣。

由于所有变体的价格都相同，客户希望折扣百分比数字在 table 之外仅突出显示一次，而不是在每个价格单元格中重复出现，原因有二：更好的可见性和减少视觉效果价格上的噪音。

问题：

当只有一个价格时百分比数字显示正确，如 Table 2.

但随着变化数量的增加，字体平滑消失，显示每个价格的百分比重叠 Table 1。随着变化的数量和价格的增加，情况显然会变得更糟。

我们尝试从样式 sheet 中解决它，使用 :not(first-child) 来隐藏第一个单元格下方的所有单元格的百分比，但没有结果。

任何替代解决方案？

_{注：例子中的数字和百分比与真实情况不符}

.products .snippet-dto-porcentaje {
  display: none;
}

.product .snippet-dto-porcentaje {
  position: absolute;
  top: 2rem;
  right: 3rem;
  font-size: 7rem;
  font-family: 'Helvetica', sans-serif;
  color: #000000;
  border-radius: 5rem;
  padding: 1rem;
}

table.vartable {
  border-collapse: collapse;
  width: fit-content;
  margin: 2rem 0 4rem;
}

table.vartable>thead>tr>th {
  border: 2px;
  border-style: solid;
  border-color: gray;
  color: white;
  background-color: gray;
  text-align: center;
}

table.vartable td {
  border: 2px;
  border-style: solid;
  border-color: gray;
  text-align: center;
  padding: 0 3rem;
}

table.vartable td.pricecol {
  padding: 0 1.75rem;
}

td.pricecol>del {
  padding-right: 1.75rem;
}

td.pricecol>ins>span>bdi {
  padding-left: 1.75rem;
}

td.pricecol>ins>span>bdi:before {
  content: "|";
  margin-left: -2rem;
  font-size: 3rem;
  color: gray;
  line-height: 0%;
  position: absolute;
  transform: scale(0.5, 0.6);
  margin-top: 0.7rem
}

<div class="product">
  <table class="table vartable">

    <thead>
      <tr>
        <th>TABLE 1</th>
      </tr>
    </thead>

    <tbody>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>


      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>


      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

    </tbody>
  </table>


  <table class="table vartable">

    <thead>
      <tr>
        <th>TABLE 2</th>
      </tr>
    </thead>

    <tbody>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje" style="top:14rem;">30%</span>
        </td>
      </tr>

    </tbody>
  </table>

</div>

Answer 1

你可以把百分比的text-shadow设置成白色来隐藏后面的东西

.products .snippet-dto-porcentaje {
  display: none;
}

.product .snippet-dto-porcentaje {
  position: absolute;
  top: 2rem;
  right: 3rem;
  font-size: 7rem;
  font-family: 'Helvetica', sans-serif;
  color: #000000;
  border-radius: 5rem;
  padding: 1rem;
  text-shadow: 0px 0px 2px white;
}

table.vartable {
  border-collapse: collapse;
  width: fit-content;
  margin: 2rem 0 4rem;
}

table.vartable>thead>tr>th {
  border: 2px;
  border-style: solid;
  border-color: gray;
  color: white;
  background-color: gray;
  text-align: center;
}

table.vartable td {
  border: 2px;
  border-style: solid;
  border-color: gray;
  text-align: center;
  padding: 0 3rem;
}

table.vartable td.pricecol {
  padding: 0 1.75rem;
}

td.pricecol>del {
  padding-right: 1.75rem;
}

td.pricecol>ins>span>bdi {
  padding-left: 1.75rem;
}

td.pricecol>ins>span>bdi:before {
  content: "|";
  margin-left: -2rem;
  font-size: 3rem;
  color: gray;
  line-height: 0%;
  position: absolute;
  transform: scale(0.5, 0.6);
  margin-top: 0.7rem
}

<div class="product">
  <table class="table vartable">

    <thead>
      <tr>
        <th>TABLE 1</th>
      </tr>
    </thead>

    <tbody>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>


      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>


      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
        </td>
      </tr>

    </tbody>
  </table>


  <table class="table vartable">

    <thead>
      <tr>
        <th>TABLE 2</th>
      </tr>
    </thead>

    <tbody>

      <tr>
        <td class="pricecol" data-label="Precio">
          <del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje" style="top:14rem;">30%</span>
        </td>
      </tr>

    </tbody>
  </table>

</div>

Answer 2

由于您希望隐藏 td，但只隐藏第一个行，因此您需要一个 css 选择器，例如：

table > tbody > tr:not(:first-of-type) > td {
    display: none;
}

所以得到不是第一行，里面的td。

.products .snippet-dto-porcentaje {display:none;}

.product .snippet-dto-porcentaje {
position:absolute;
top:2rem; right:3rem;
font-size:7rem;
font-family: 'Helvetica', sans-serif;
color:#000000;
border-radius: 5rem;
padding:1rem;

}

table > tbody > tr:not(:first-of-type) > td {
  display: none;
}

table.vartable {border-collapse: collapse;
width: fit-content;
margin: 2rem 0 4rem;}

table.vartable > thead >tr>th {
    border: 2px;
    border-style: solid;
    border-color: gray;
    color: white;
    background-color: gray;
    text-align: center;}

table.vartable td {
border: 2px;
border-style: solid;
border-color: gray;
text-align:center;
padding:0 3rem;
}


table.vartable td.pricecol{padding:0 1.75rem;}

td.pricecol > del {padding-right: 1.75rem;  
}

td.pricecol > ins > span > bdi {padding-left: 1.75rem;}

td.pricecol > ins > span > bdi:before {content:"|"; 
    margin-left:-2rem; 
    font-size:3rem; 
    color: gray; 
    line-height: 0%; 
    position: absolute;
transform: scale(0.5, 0.6);
margin-top:0.7rem}

<div class="product">
<table class="table vartable">

<thead>
<tr>
<th>TABLE 1</th>
</tr>
</thead>

<tbody>

<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
          
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
          
<tr>
 <td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>

<tr>
 <td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>

<tr>
 <td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>


<tr>
 <td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>


<tr>
 <td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>

<tr>
 <td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>

</tbody>
</table>


<table class="table vartable">

<thead>
<tr>
<th>TABLE 2</th>
</tr>
</thead>

<tbody>

<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00&nbsp;&euro;</bdi></span></del> <ins><span><bdi>10,20&nbsp;&euro;</bdi></span></ins><span class="snippet-dto-porcentaje" style="top:14rem;">30%</span>
</td>
</tr>
          
</tbody>
</table>

</div>

Answer 3

我通过调整 this answer

找到了解决方案

   .vartable tr:not(:first-child) .snippet-dto-porcentaje {display:none;}

隐藏除第一个单元格之外的所有单元格内容

Hide all cells content except the first one

css

css-selectors

cell

script