tr / td高度拒绝为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

Add font-size:0; margin:0; font-size:0; margin:0; to the class

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

Answer 4

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

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

Answer 5

I just had a very similar problem - my solution was to set both height and max-height to s.th. slightly above 0, like so

height:0.01px; max-height:0.01px;

perhaps combined with

visibility:hidden;

No idea, why setting it to 0 does not work. But, perhaps, using 0.01px instead of 0px ist still sufficient for you

Answer 6

You need to set these as well if you'd like to keep the width.

line-height: 0 !important;
visibility: hidden;

Answer 7

Combination of few other solutions:

td {
  overflow: hidden;
  line-height: 0;
}

if this don't have whole text and you have part if it showing up you can use:

<td><div>text</div></td>

and additionally:

td div {
    overflow: hidden;
}

Answer 8

By using opacity we can hide the contents of tr td Once check this