Setting table height in HTML does not affect

Why does this table height not work?

<table border=1 bgcolor="green" width=80% height="30%">
    <tr>
        <td rowspan="2" >
            This is 1st row 1st column
        </td>
        <td >
            2
        </td>
    </tr>
</table>

http://jsfiddle.net/zQNS4/

+5
source share
3 answers

just add the following to your css:

html, body{
    height: 100%;
}

Like all of the above, it tabledoes not have height-attriute, but in most browsers intrepet is anyway. you can see the result in jsfiddle .

The reason you need to do this is because the parent of everything that needs to have a height in% must also have a height (as the Shadow Wizard said: “30% of what exactly?” - the parent must have a height )

+8
source

table height. CSS.

table{
   height: 30%;
}
0
<div style="height: 200px; overflow-y: scroll;">
    <table border=1 bgcolor="green">
        <tr>
            <td rowspan="2" >
                This is 1st row 1st column
            </td>
            <td>
                 2
            </td>
        </tr>
   </table>
</div>
0
source

All Articles