使表格单元格变成正方形答案

【问题标题】：Make table cells square使表格单元格变成正方形
【发布时间】：2014-05-15 03:38:21
【问题描述】：

如何确保表格的每个单元格都变成方形而不使用固定尺寸？当它们改变宽度时，要响应。

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>

【问题讨论】：

标签： css responsive-design css-shapes aspect-ratio

【解决方案1】：

您可以使用Grid of responsive squares 中描述的技术。

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

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 demo

【讨论】：

两位反对者能否解释原因，我对此表示同意，但没有解释就不是很有建设性。
此解决方案不适用于 android
如何垂直对齐：内容居中？
@BradKent 这里描述了一种技术：stackoverflow.com/a/20457076/1811992（参见 3.Centering the content）。你也可以看看这个stackoverflow.com/questions/8865458/…
在首先对齐文本之前，您必须添加“宽度：100%；高度：100%；”到“td .content {...}”，然后您可以简单地对齐文本

【解决方案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 报告错误 ;-)

【讨论】：

嗯，这在这个小提琴中有一个非常奇怪的效果：jsfiddle.net/webtiki/cM3yb
@web-tiki：对我们来说，它在小提琴中运行良好。你能描述一下你看到的奇怪的效果吗？
以前从未使用过 jFiddle，所以我不能说它什么时候看起来不错，什么时候很奇怪...... ;-) 我建议你必须从 CSS 中删除 body { ... }......
小提琴非常好用，您可以对其进行编辑并保存以向我们展示您的技术。它基本上就像一个网页，每个人都可以编辑、保存和分享......
@tampis 我刚刚用 Firefox 检查过，它更好，但 tds 不是方形的。我会截屏给你看。

【解决方案3】：

如果有人正在寻找不需要固定 width 属性（即使是百分比）的解决方案，这就是我根据上述答案和已批准答案中的 link 得出的结论：

td {
    height: 0;

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

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

有点蹩脚，但一石二鸟：

成功了
使内容垂直对齐

【讨论】：