CSS Display: Table Min-Height Not Working

CSS display: table min-height not working

When using tables, height essentially is min-height, as tables always stretch. Just get rid of the "min-" and it will work as you expect.

Can I use a min-height for table, tr or td?

It's not a nice solution but try it like this:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

and set the divs to the min-height:

div {
    min-height: 300px;
}

Hope this is what you want ...

Why is min-height not working on my table in Safari and Firefox?

min-height doesn't work on tables.

You will have to replace it with height

.spell span {    position: relative;    top: 25%;}.note {    clear: both;}.spell {    text-align: center;    max-width: 100%;    height: 35px;    background-color: #E7E7E7;}.BUFF {    background-color: #80DE57;}.NERF {    background-color: #DE5B54;}.CHANGE {    background-color: #D2A557;}.NEW {    background-color: #50B9EB;}.BUGFIX {    background-color: rgb(141, 141, 141);}.change_icon {    -webkit-touch-callout: none;    -webkit-user-select: none;    -khtml-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    cursor: default;    color: white;    vertical-align: middle;    text-align: center;    min-width: 70px;    height: 100%;    display: table-cell;}

<div class="note">    <div class="spell"> <span class="spelliconwithtitle">text</span>
    </div>    <hr style="margin: 0; padding: 0;">    <div style="overflow: auto;width: 100%; height: 41px; max-height: 100%; position: relative; display: table; ">        <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell;height: 41px; ">test</p>        <div class="change_icon BUFF">text</div>    </div>    <hr style="margin: 0; padding: 0;">    <div style="overflow: auto;width: 100%; height: 41px; max-height: 100%; position: relative; display: table; ">        <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; height: 41px;">test</p>        <div class="change_icon NERF">nerf</div>    </div></div>

display table height not always respected

Table cell and table heights are only initial recommendations. The same thing to a degree happens with width. If the content of the words can't shrink any further in width the table will grow to fit.

Think of it as a min-height when used on table styled elements.

If you are wanting the content inside to have a maximum height you will want to set the height and overflow, etc. on the final child span inside.

min-height for a div with display: table not working in firefox

This is actually a Firefox bug

see: https://bugzilla.mozilla.org/show_bug.cgi?id=307866

min-height won't work with display: table

You need to use fixed height for solving this.

CSS min-height not working for child div

Thanks for your replies.

Answer given by Hashem Qolami helped me for this.

overflow:hidden;

for the container div made it extendable.

Firefox Won't Fill Height for Table Layout

Problem exists in the following styles:

#tablecontainer {
  min-height: 100%;  /* change min-height to height */
  width: 100%;
}
.table-panel {
  display: table;
}

min-height: 100% property doesn't work properly with min-height always. Change min-height to height and it will work.

Note: HTML tables have special behavior with height. If you specify height for a table or and element having display: table and its content doesn't fit in then its height will be increased automatically according to the content. So we can always use height instead of min-height with tables.

#tablecontainer{  width: 100%;  height: 100%;}
.table-panel {  display: table;}.table-panel > div {  display: table-row;}.table-panel > div.fill {  height: auto;}
/* Unimportant styles just to make the demo looks better */#top-cell {  height: 50px;  background-color:aqua;}#middle-cell {  /* nothing here yet */  background-color:purple;}#bottom-cell {  height:50px;  background-color:red;}
body {  height: 100%;  margin: 0;}html {  height: 100%;}

<div id="tablecontainer" class="table-panel">  <div id="top-cell">    <nav>    </nav>  </div>
  <div id="middle-cell" class="fill">    <div class="section">      <div class="container">        <p>{{ content }}</p>      </div>    </div>  </div>
  <div id="bottom-cell">    <nav>      <p>I'm the footer!</p>    </nav>  </div></div>

CSS Display: Table Min-Height Not Working