Question

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

基金会没有照顾到这一点。当我以固定的宽度和高度（以像素为单位）初始化TD时，当调整浏览器的宽度时，它会水平缩小td，但不会保持相同的宽高比。

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

Answer 1

以下是一种可行的方式。

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，一些移动浏览器）所以它可能值得使用后备。

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>

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

2 个答案: