tr / td height refuses to be 0

Question

I'm trying to do something very simple: get the height of a tr to 0px, but it won't work.

See the code or this JSFiddle for what I've tried.

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;
}

RESULT:

There is red in the result, so the tr height is still not 0.

How can I get it to be 0, while maintaining the width?

EDIT: The issue seems to be the checkbox nested into the td. How can I get its height down to 0?

Answer 1

I would add visibility: collapse; to tr to fix that

Answer 2

Wrap it in a DIV, set it to not be tall enough, hide the overflow:

div {
 height: 1.2em;
 overflow: hidden;
}

Answer 3

I know I'm late to the party, but I had the same problem with a Bootstrap 3 table. Looking in Chrome inspector, it looks like the bootstrap css selectors are very specific, so they seem to take precedence over my css unless I am even more specific. So while the following did not work:

tr.my-class td {
    height: 0;
    padding: 0;
    border-top: 0;
    overflow: hidden;
    line-height: 0;
    transition: all ease 0.5s;
}

tr.my-class.expanded td  {
    height: 20px;
    padding: 5px;
    border-top: 1px solid #ddd;
    line-height: 20px;
}

Changing it to this to mirror the Bootstrap selectors worked:

table>tbody>tr.my-class>td {
    height: 0;
    padding: 0;
    border-top: 0;
    overflow: hidden;
    line-height: 0;
    transition: all ease 0.5s;
}

table>tbody>tr.my-class.expanded>td  {
    height: 20px;
    padding: 5px;
    border-top: 1px solid #ddd;
    line-height: 20px;
}