如何製作填充整個頁面的表格

Question

我想創建一個流體佈局，如下面的填充整個頁面（寬度：100％;高度：100％）。

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

在每個單元格的內部，我想有一個div寬度圓角bordes並希望有細胞之間的細胞間距。每個單元需要固定大小（溢出：隱藏）。

有關最佳方式的任何想法？

（更新）

我試着做一個表，但無法控制行和/或細胞的身高增長不成比例，即使它裏面的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>