等宽等高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;也很重要，因为它覆盖了任何与表格相关的边框渲染。

但是，由于表格呈现方式的不同，这种方法在某些大小上可能只有一个像素。It 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 (旧的it，一些移动浏览器)，所以它可能是值得使用后备。

Answer 2

如果<td>中没有任何内容，则可以很好地工作。但对于某些内容，填充是内容高度之外的额外填充。如下例所示：

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; border-collapse: collapse;">
  <tbody>
    <tr>
      <td style="width: 100%; padding-bottom: 100%; background-color: #896464">Lorem ipsum dolor sit amet.</td>
    </tr>
    <tr>
      <td style="width: 100%; padding-bottom: 100%; background-color: #20A034">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</td>
    </tr>
  </tbody>
</table>