tr/td height拒绝为0

Question

我正在尝试做一些非常简单的事情:得到一个trto 的高度0px,但它不会起作用.

请参阅代码或此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 ？

编辑:这个问题似乎checkbox嵌入了td.如何将其高度降至0？

Answer 1

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

Answer 2

加入font-size:0; margin:0;课程