Css 使表格单元格成正方形

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

表格{
宽度：90%；
}
运输署{
宽度：30%；
}
tr{
/**这里应该放什么**/
}

1.
2.
3.
4.
5.
6.
7.
8.
9

您可以使用中描述的技术：

通过一个表格和方形表格单元格来适应您的用例，它将如下所示：

表格{
宽度：90%；
}
运输署{
宽度：33.33%；
位置：相对位置；
}
运输署：在{
内容：''；
显示：块；
利润率最高：100%；
}
td.内容{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景：金；
}

1.
1.
1.
1.
1.
1.
1.
1.
1.

这是我的代码：

关键在于使用：

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

因为填充底部是根据宽度定义的。更多信息：

---

注意：之前我发布了一个不工作的代码（请参阅）。感谢@web tiki报告此错误；-）

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

宽度

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

td {
    height: 0;

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

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

它有点瘸，但它一石二鸟：

• 成功了吗
• 使内容垂直对齐

---

这把小提琴的效果非常好：@web-tiki：因为我们在小提琴中表现得很好。你能描述一下你看到的怪异效果吗？以前从来没有用过JFIDLE，所以我不能说它什么时候看起来好，什么时候怪异…；-）我建议，你必须从CSS中删除

主体{…}

。好吧，fiddle非常方便，你可以编辑它并保存它来向我们展示你的技术工作。它基本上就像一个网页，每个人都可以编辑、保存和共享…@tampis我刚用firefox检查过，它更好，但是

td

s不是正方形的。我会做一个屏幕截图给你看。两个投票人能解释一下原因吗？我同意，但没有解释就不是很有建设性。这个解决方案在android上不起作用。如何垂直对齐：中间内容？@BradKent这里介绍了一种技术：（见3.将内容居中）。您还可以在对齐文本之前查看一下这一点。首先，您必须在“td.content{…}”中添加“width:100%；height:100%；”，然后可以简单地对齐文本