CODEWITHSUNDEEP
htmlcss
Quelklef
Quelklef

Reputation: 2147

tr / td height refuses to be 0

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:

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?

Upvotes: 26

Views: 27799

Answers (9)

BrainOverflow
BrainOverflow

Reputation: 111

for me:

visibility: collapse

resolved all problems of hiding rows or table's header

Upvotes: 3

ns16
ns16

Reputation: 1560

To change the height of tr to 0px, you can use flexbox:

.model {
  display: flex;
  height: 0;
  min-height: 0;
  overflow: hidden;
}

See the full example here.

Upvotes: 0

Dave Smash
Dave Smash

Reputation: 3001

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

Upvotes: 3

jcubic
jcubic

Reputation: 66590

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

Upvotes: 0

Andreas Rozek
Andreas Rozek

Reputation: 412

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

Upvotes: 1

Nate
Nate

Reputation: 1274

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

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

Upvotes: 2

ATD
ATD

Reputation: 894

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

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

Upvotes: 0

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10292

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

Upvotes: -2

Nate
Nate

Reputation: 1274

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

Upvotes: 10

Related Questions