具有相等宽度和高度 TD 的响应表答案

【问题标题】：Responsive table with equal width and height TDs具有相等宽度和高度 TD 的响应表
【发布时间】：2019-06-18 18:24:22
【问题描述】：

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

基金会不关心这些。当我用固定的宽度和高度（以像素为单位）初始化 TD 时，当调整浏览器的宽度时，它会水平缩小 td，但不会保持相同的纵横比。

我使用 Foundation 作为我的基本响应框架。

【问题讨论】：

标签： html css responsive-design

【解决方案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;
}

vw 单位是 not so well supported yet（旧的 IE，一些移动浏览器），因此可能值得使用后备。

【讨论】：

如果您有两个以上的单元格，例如 8 个单元格，该怎么办。我为宽度和填充底部做了 12.5%，但是当我调整高度和宽度时不相等。
@IdanShechter - jsfiddle.net/ocp36uLb/2 - 你是否也在每行添加了八个单元格？
是的，8x8。当我调整大小时，这个jsfiddle.net/ocp36uLb/4 会产生 35x37 像素的 TD
看起来像表格的怪癖（有趣的事情）这些 div 的行为：jsfiddle.net/ocp36uLb/13 - 可能需要重置，或者宽度和填充的一些偏移，我会尽快调查并编辑我的回答
关闭记录，是否有一个选项可以在添加文本时使单元格大小保持相同的高度和宽度。当我添加文本或其他内容时，它会扩展单元格高度。

【解决方案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>

【讨论】：