将表格单元格设为正方形

Question

如何在不使用固定大小的情况下确保表格的每个单元格都变成正方形？当它们改变宽度时，要响应。

table {
  width: 90%;
}
td {
  width: 30%;
}
tr {
  /** what should go here? **/
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
<table>

Answer 1

新答案：

要使表格单元格成为正方形，您可以在 div 元素内的

td

上使用

aspect-ratio

属性。像这样：

table {
  width: 90%;
}
td {
  width: 33.33%;
  position: relative;
}
td .content {
  aspect-ratio: 1 / 1 ;
  background: gold;
}

<table>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
  </tr>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
  </tr>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
  </tr>
</table>

---

之前的回答：

您可以使用以下描述的技术：响应式方块网格。

使用表格和方形表格单元适应您的用例，它看起来像这样：

table {
  width: 90%;
}
td {
  width: 33.33%;
  position: relative;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}
td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: gold;
}

<table>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
  </tr>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
  </tr>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
  </tr>
</table>

FIDDLE 演示

Answer 2

这是我的代码：http://jsfiddle.net/vRLBY/1/

关键是使用：

td { width: 33%; padding-bottom: 33%; height: 0; }
td div { position: absolute }

因为

padding-bottom

是根据宽度定义的。更多信息：http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

注意：之前我发布了一个不起作用的代码（参见here）。感谢@web-tiki 报告该错误；-)

Answer 3

如果有人正在寻找不需要固定

width

属性（即使是百分比）的解决方案，以下是我根据上述答案和已批准答案中的 link 得出的结论：

td {
    height: 0;

    &:after, &:before {
        content: '';

        display: block;
        padding-bottom: calc(50% - 0.5em);
    }
}

虽然有点蹩脚，但是一石二鸟：

• 有窍门
• 使内容垂直对齐

Answer 4

对我来说，解决方案是根据你拥有的细胞数量进行 100% 的划分。

例如，如果您有 7 个电池：

100% / 7 = 14.28%

所以 14.28% 是每个单元格的大小。

<td style="height=14.28%; width=14.28%;" >...</td>