使表格单元格变成正方形

Posted 2023-03-05

【中文标题】使表格单元格变成正方形

【英文标题】：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>

【参考方案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 这里描述了一种技术：***.com/a/20457076/1811992（参见 3.Centering the content）。你也可以看看这个***.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);
    

有点蹩脚，但一石二鸟：

成功了 使内容垂直对齐