html - tr/td高度拒绝为0

Question

我正在尝试做一些非常简单的事情:将 tr 的高度设置为 0px，但它不起作用。

查看代码或this JSFiddle对于我所尝试的。

HTML:

<table>
  <tbody>
    <tr>
      <td>
        Title 1
      </td>
      <td>
        Title 2
      </td>
    </tr>
    <tr class="model">
      <td>
        <input placeholder="Name">
      </td>
      <td>
        <input class="delete" type="checkbox">
      </td>
    </tr>
</table>

CSS:

.model, .model * {
  max-height: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
}

.model {
  background-color: red;
}

结果:

结果中有红色，所以tr高度仍然不为0。

我怎样才能让它为 0，同时保持宽度？

编辑:问题似乎是嵌套在 td 中的 checkbox。如何将它的高度降为 0？

Answer 1

我会添加 visibility: collapse; 到 tr 来解决这个问题