html - 用 CSS 显示或不显示一行

Question

我不是程序员，但我会尽力打造自己的网站。我有一家在线服装店，我想在商品描述中仅显示该商品的可用值，现在我有一个包含一些行的表，如果没有值，我想隐藏并压缩该表。例如……

   <tr>
    <td style="width:30%"><b>· Hip:</b>  {{HIP}}</td>

  </tr>
  <tr>
    <td style="width:30%"><b>· Inseam:</b>  {{INSEAM}}</td>

  </tr>
  <tr>
    <td style="width:30%"><b>· Rise:</b>  {{RISE}}</td>

  </tr>

它应该显示...

· Hip: {{HIP}}
· Inseam: {{INSEAM}}
· Rise: {{RISE}}

我希望如果我的库存文件中没有“inseam”值，则该行将隐藏并只显示...

· Hip: {{HIP}}
· Rise: {{RISE}} 

我不能使用 javascript，因为 eBay 不允许。对不起，如果我没有用正确的编程语言表达自己。希望可以有人帮帮我。感谢大家!!!

Answer 1

https://css-tricks.com/almanac/selectors/e/empty/

稍微重构一下您的代码和 :empty 伪选择器:

HTML:

<table>
  <tr>
    <td class="hip" style="width:30%">{{HIP}}</td>
  </tr>
  <tr>
    <td class="inseam" style="width:30%"></td>
  </tr>
  <tr>
    <td class="rise" style="width:30%">{{RISE}}</td>
  </tr>
</table>

CSS:

.hip:before {
  content: '· Hip: ';
  font-weight: bold;
}

.inseam:before {
  content: '· Inseam: ';
  font-weight: bold;
}

.rise:before {
  content: '· Rise: ';
  font-weight: bold;
}

.inseam:empty {
  display: none;
}

fiddle :http://jsfiddle.net/3fL1y0mg/2/

尝试将 {{INSEAM}} 添加到该表行中