html - 具有相等宽度和高度 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 (我猜你可以改用它)- 即使没有 border-collapse 定义。

另一种对表格完美工作的方法是 use vw units .有点复杂，因为它们从视口(viewport)获取尺寸，因此您需要考虑整体表格尺寸占视口(viewport)的比例。 1vw 是视口(viewport)的 1%。您将从链接中看出它是完美的。

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

vw 单位是 not so well supported yet (旧的 IE，一些移动浏览器)所以可能值得使用回退。