Question

我有一个带有下拉动画的表格。因此，当用户单击上一个表行中的按钮时，下面的表行应该更改其高度，现在应该可见。

但是我有隐藏这个表格行的问题，因为它不会达到0的高度。

我尝试添加line-height: 0和其他类似问题中提到的其他CSS样式。但它对我不起作用。

注意：display: none因动画而无法选择。

编辑：我删除<td>的边框和填充，但行之间仍有空格。

td {
  padding: 8px;
  border: 1px solid black;
}

.hidden {
  background-color: red;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  white-space: normal;
  word-break: break-all !important;
  word-wrap: break-word !important;
}

.hidden td {
    border: none;
    padding: 0 !important;
}

p, span {
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  white-space: normal;
  word-break: break-all !important;
  word-wrap: break-word !important;
}

<table>
  <thead>
    <th>foo</th>
    <th>bar</th>
  </thead>
<tbody>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr class="hidden">
    <td>
       <span>fb</span>
       <p>test</p>
    </td>
    <td>bf</td>
  </tr>
  <tr>
    <td>oofrab</td>
    <td>raboof</td>
  </tr>
  <tr>
    <td>oofrab</td>
    <td>raboof</td>
  </tr>
</tbody>
</table>

Answer 1

在td中尝试使用font-size：0和line-height：0。

Answer 2

您可以将tr.hidden td {display:none}设置为足够

Answer 3

使用TABLE's样式。例如“border-collapse”

它可能会影响在html中呈现“隐藏”表行的方式。

如何设置高度0？

3 个答案: