tr / td高度拒绝为0

Question

新手上路，请多包涵

我正在尝试做一些非常简单的事情：将 tr 的高度设为 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？