新答案：

要使表格单元格为方形，可以在td元素内的div上使用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>

上一条回答：

您可以使用中介绍的技术：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

下面是我的代码：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报告此bug ;- ）

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

td {
    height: 0;

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

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

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

• 很管用
• 使内容垂直对齐