具有相等宽度和高度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外，一些手机浏览器），所以它很可能是值得使用回退。