Funny table width

Using width=20% causes the divs to spread out evenly, any other number results in uneven distribution, regardless of the number of divs inside.

by ocorpening

HTML

<table>
    <tr>
        <td>
            <div class="container">
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
            </div>
        </td>
        <td>
            <div class="container">
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
            </div>
        </td>
        <td>
            <div class="container">
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
             </div>
       </td>
        <td>
            <div class="container">
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
                <div class="inner-div">hi</div>
             </div>
       </td>
    </tr>
</table>

CSS

td {
    border: 1px solid black;
    width:100px;
}

.container {
    margin: 2px;
    display: table;
}

.inner-div {
    border: 1px solid green;
    padding: 2px;
    display: table-cell;
    width:20%;
    text-align: center;
    overflow: hidden;
}