3个垂直table的问题

Question

问题是这样的：
3个table垂直分布，即上table、中table、下table。
上table高度固定，下table高度也固定，中table随着浏览器大小的变化，高度自适应。
我把3个table都设置为position：absolute，但在关键的中table的height属性却不知道怎么设置，设置成100%的话，就会出现中table的top属性有效，bottom属性无效。
求赐教。

Answer 1

把三个table用div包起来

        table{ width: 100%; height: 100%; position: absolute; }
        table tr td{ border: 1px solid #ddd;}
        .table1{ width: 100%; position: absolute; height: 100px; top: 0;}
        .table2{ width: 100%; position: absolute; top: 100px; bottom: 100px;}
        .table3{ width: 100%; position: absolute; height: 100px; bottom: 0;}

<div class="table1">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
<div class="table2">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
<div class="table3">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>