响应表具有相等的宽度和高度TDs

Question

如何创建响应式HTML表格,每个单元格/ TD具有相等的宽度和高度？因此,当我调整浏览器窗口大小或调整表的容器大小时,表格将调整大小,但每个单元格将具有相同的高度和宽度.

基金会不会照顾这一点.当我以固定的宽度和高度(以像素为单位)初始化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;也很重要,因为它会覆盖任何与表相关的边框渲染.

但是,由于表格的渲染方式,这种方法很可能是某些尺寸的像素.它适用于div(你可以使用它,我猜) - 即使没有边界折叠定义.

另一种适用于表格的方法是使用vw单位.稍微复杂一点,因为它们从视口中获取大小,因此您需要考虑整个表格大小的视口比例.1vw是视口的1%.你会从链接中看到它是完美的.

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

vw单元还没有得到很好的支持(旧的IE,一些移动浏览器)所以它可能值得使用后备.