具有相等寬度和高度TD的響應表

Question

如何創建每個單元格/ TD具有相等寬度和高度的響應HTML表格？所以，當我調整瀏覽器窗口的大小或調整表格的容器大小時，表格將調整大小，但每個單元格的高度和寬度都相等。

基金會沒有照顧到這一點。當我以固定寬度和高度以像素初始化TD時，在調整瀏覽器寬度時，它將水平縮小td，但不保持相同的寬高比。

我使用Foundation作爲我的基礎響應框架。

Answer 1

以下是一種可行的方法。

https://jsfiddle.net/ocp36uLb/32/

table { 
    border-collapse: collapse; 
    width: 100%; 
} 
td { 
    width: 50%; 
    padding-bottom: 50%; 
    display: inline-block; 
} 

通過設定填充到是相同的，我們創建維持它在調整大小的縱橫比的方形的寬度。我們還需要使用display: inline-block;來覆蓋默認的display: table-cell;，這將使單元展開以適應其父表。 border-collapse: collapse;也很重要，因爲它會覆蓋任何表格相關的邊框呈現。

但是，由於表格呈現的方式，此方法很可能是某種尺寸的像素。它works perfectly for divs（你可以用它來代替，我猜） - 即使沒有邊界摺疊的定義。

另一種完美適用於表格的方法是use vw units。更復雜一些，因爲他們從視口中獲取大小，所以您需要考慮整個表大小所佔的視口比例。 1vw是視口的1％。你會從鏈接看到它是完美的。

table { 
    width: 100%; 
    border-collapse: collapse; 
} 
td { 
    height: 15vw; 
    width: 15vw; 
    display: inline-block; 
} 

大衆單位爲not so well supported yet（舊IE外，一些手機瀏覽器），所以它很可能是值得使用回退。