1

So I have a tr within a table. onClick it appends some html. I'm trying to make the tr it appends transition nicely, so I'm trying to set the height to 0, then onClick set it to auto.

However, my div isn't taking height 0. I can add height: 0; but it still keeps the height.

My HTML:

<tr class="info_container">  
    <td colspan="7">Pick a time
        <button id="time_btn">Button</button>
        <span class="tickets_left_cont"> 7 tickets left</span>
    </td>
</tr>

CSS:

.info_container {
    background: #fff;
    color: #000;
    z-index: 999;
    left: 0;
    width: 100%;
    padding: 15px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    opacity: 0;
    text-align: left;
    font-family: BreeSerifLt;
    border-bottom: 3px solid #000;
}

#time_btn {
    outline: 0;
    padding: 10px;
    background: #9A0FC7;
    border: 0;
    color: #fff;
    display: block;
    margin-top: 10px;
    font-weight: 300;
    font-family: BreeSerifLt;
}

What am I doing wrong? Why can't I make info_container class height 0 so it hides the div?

Thanks!

pourmesomecode
  • 4,108
  • 10
  • 46
  • 87
  • Possible duplicate of [Set the table column width constant regardless of the amount of text in its cells?](http://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell) – fregante Jun 28 '16 at 09:13

1 Answers1

1

On tables, height and width behave as min-height and min-width

fregante
  • 29,050
  • 14
  • 119
  • 159
  • Oh thanks man, I wasn't aware of that. So i'd need to use `max-height` whenever I want to change the height of an element within a table? – pourmesomecode Jun 28 '16 at 09:15
  • Look here: http://stackoverflow.com/questions/5286747/how-to-force-a-td-to-be-a-certain-height-with-css – fregante Jun 28 '16 at 09:18