Question

我正在构建一个应用程序，并且有一个动态创建的表。

表行创建如下

<tr style="background-color: #71aa9a;">
  <td></td>
  .
  . 
  .
  <td></td>
<tr/>

在创建过程中，某些 td 被隐藏了。

出现的问题是，当 td 不可见（ visibility：hidden ）时， tr 的背景色消失并且是白色的代替。

有人可以向我解释为什么以及如何解决吗？

我不想使用display：none;由于需要连续输入特定的td。

Answer 1

很抱歉，我对此问题没有更明确的解释，但事实是<tr>元素的背景属性很挑剔。如果我是你，我只是将单元格内容包装在<div>中，然后对它进行visibility: hidden。

<tr>
  <td><div style="visibility: hidden">You dont see me!</div></td>
  <td>etc.</td>
</tr>

Answer 2

好的，我会主要使用font-size: 0来欺骗，这将使内容不可见，无法选择。所有内部元素（>*）的样式都将覆盖默认值。

摘要

tr {
  background: red;
}

.hidden,
.hidden>* {
  font-size: 0;
  height: 0;
  width: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td class="hidden"><button onclick="">Smith</button></td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

隐藏的可见性可删除表格中的背景色

2 个答案:

摘要