html - 如何制作一个填满整个页面的表格

Question

我想创建一个流体布局，如下所示，填充整个页面（宽度：100%；高度：100%）。

+----+----+----+----+
|    |    |    |    |
+----+----+----|    |
|    |    |    |    |
+----+----+----|    |
|    |    |    |    |
+----+----+----+----+

在每个单元格内部，我希望有一个 div 宽度的圆形边框，并希望在单元格之间有单元格间距。每个单元格都需要固定大小（溢出：隐藏）。

关于最好的方法的任何想法？

（更新）

我试过做一个表格，但无法控制行和/或单元格的高度不成比例地增长，即使其中的 td 和 div 具有固定的百分比高度并且隐藏了溢出。

我也尝试过 9 个 div 向左浮动和 1 个 div 向右浮动。如果没有设置边距或填充，则效果很好。一旦设置了填充和边距（以百分比表示）并补偿宽度和高度（也以百分比表示）。一切似乎都没有对齐。

我应该继续进一步发展这两个中的哪一个？

Answer 1

<style>
    html, body, table { width:100%; height:100%; }
    td { width:25%; height:33%; }
    div.round { width:100%; height:100%; background:blue; border-radius:5px; overflow:hidden; }
</style>


<table>
    <tr>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td rowspan="3"><div class="round"></div></td>
    </tr>
    <tr>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
    </tr>
    <tr>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
    </tr>
</table>