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

table {
    max-height: 30px;
    background: #eee;
    margin: 30px;
    overflow-y: scroll;
    border: 2px solid #ccc;
}

table tr {
    border-bottom: 1px solid #fff;
}

table td {
    padding: 10px;
}

p {
    margin: 30px;
}

<table>
    <tr><td>Sample</td><td>First </td></tr>
    <tr><td>Autumn</td><td>Summer</td></tr>
    <tr><td>PC</td><td>Apple</td></tr> 
    <tr><td>Sun</td><td>the Moon</td></tr>
    <tr><td>PHP</td><td>Javascript</td></tr>
    <tr><td>Sunday</td><td>Monday</td></tr>
    <tr><td>Working</td><td>Not working</td></tr>
    <tr><td>Hello</td><td>World</td></tr>
</table>

<p>Why isn't the <strong>max-height</strong> property working?</p>