Why is table not 100% of its parent div

Question

I have the following markup:

<div class="wrapper">
    <table>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
    </table>
</div>

And CSS:

.wrapper {
    height: 60px;
}

table {
    height: 100%;
    overflow: auto;
}

Here is fiddle . The problem is that table doesn't pick .wrapper 's height of 60px . Why?

Answer 1

<table> is by default display: table .

Make it display: block .

Demo

 .wrapper { height: 60px; } table { height: 100%; overflow: auto; display: block; } 

 <div class="wrapper"> <table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> </table> </div> 

Answer 2

You should set table width to 100% because default table width is auto .

table {
    width: 100%;
    height: 100%;
    overflow: auto;
}

jsfiddle

read more about table width