Setting The Height of a Table in HTML Has No Effect

Setting the height of a table in HTML has no effect

just add the following to your css:

html, body{
    height: 100%;
}

As other said, a table doesn't have a height-attriute, but most browsers intrepet that anyway. you can see the result on jsfiddle.

The reason you need to do this is that the parent element of anything that should have a height in % must have a height too (as Shadow Wizard said: "30% of what exactly?" - the parent has to have a height).

Why isn't the max-height working on table?

In CSS 2.1, the effect of 'min-height' and 'max-height' on tables,
inline tables, table cells, table rows, and row groups is undefined.

Read the spec.

Set the table to display: block if you want to force max-height.

Table height property doesn't seem to have any effect

Addig height: 100% to the table style does make it inherit the height from the parent element:

.wrapper> table {
  width: 100%;
  height: 100%;
}

Demo: http://jsfiddle.net/WDFa2/

Note: The height that the table inherits is the specificed height of the parent, i.e. 165px, not the height including padding, i.e. 175px.

height of table row not changing

The height of your row is being dictated by the padding and margin you have specified for the cells, because you are trying to specify a height for the row that is lower/smaller than the one you are getting from those. Try to set the height to some value like 400px and you'll see the effect. To get to the height that you want you might not need to individually set those margins and paddings for the cells individually.

Setting a table's td height not working in Firefox

I managed to find a workaround. I added the lines

@-moz-document url-prefix() {
    tr {
        height: 50px; // Your min height
    }
    td {
        height: auto;
    }
}

to my css and now it seems to display correctly in firefox and chrome. Not very clean but it works.

Apparently Chrome was to adopt Firefox behaviour with tables in Version 50 but reverted because it broke too many layouts. The trick applying height: 100%; to the tds worked because all percent sizes are automatically translated to auto. Makes much more sense then.

How to set maximum height for table-cell?

By CSS 2.1 rules, the height of a table cell is “the minimum height required by the content”. Thus, you need to restrict the height indirectly using inner markup, normally a div element (<td><div>content</div></td>), and set height and overflow properties on the the div element (without setting display: table-cell on it, of course, as that would make its height obey CSS 2.1 table cell rules).

Firefox hides tables with no content and no set height

A workaround for this bug would be to use CSS generated content on the elements. Even setting an empty string solves the issue, and since it is blank, there should be no negative effects from doing this.

Workaround:

table:after,
div:after {
    content: "";
}

Working Example (JSFiddle):

table, div {   width: 200px;   background: tomato;   margin-bottom: 20px;   border: 2px solid black;}div + div, table + table {    background: green;    height: 200px;}
div {       display:table;    }table:after,div:after {    content: "";}

<div></div><div></div>
<table></table><table></table>

CSS percentage height has no effect

You could do this:

1. • Add a container
2. • Give it height 100%
3. • Add min-height to the panel container
     
     

HTML

<div class="container">
<div class='panel'>
    <div class='panel-heading'>
        Heading
    </div>
    <div class='panel-body'>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
    </div>
</div>
</div>

CSS

html,body{height:100%;}

.container {
    height:100%;
}

.panel{
    width:50%;
    height:100%;
    min-height:100%;   
}

.panel-body {
    height: 20%;
    overflow-y: scroll;
}

* {
    /* for box visibility */
    border: 1px dashed grey !important;
    background-color: #ccc;
    padding: 5px !important;
}

DEMO http://jsfiddle.net/RWPQD/11/

Ps. I set the height of .panel-body at 20%, but you can change it accordingly.

---

Related Topics