如何在不使用固定大小的情況下，保證表格的每個單元格都變成正方形？并在它們改變寬度時(shí)做出反應(yīng)。

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>

# # #要使表格單元格呈正方形，可以在td元素內(nèi)的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>

# # #這是我的代碼:http://jsfiddle.net/vRLBY/1/

關(guān)鍵是使用:

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

因?yàn)榈撞刻畛涫歉鶕?jù)寬度定義的。更多信息:http://absolide . Tumblr . com/post/7317210512/full-CSS-fluid-squares

注意:以前我發(fā)布了一個不工作的代碼(見這里)。感謝@web-tiki舉報(bào)bug-)

# # #如果有人在尋找一個不需要固定寬度屬性(即使是百分比)的解決方案，以下是我根據(jù)上述答案和“認(rèn)可答案”的鏈接得出的結(jié)論:

td {
    height: 0;

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

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

這有點(diǎn)蹩腳，但是一舉兩得:

成功了嗎 使內(nèi)容垂直對齊 # # #感謝貢獻(xiàn)堆棧溢出的答案！

請務(wù)必回答問題。提供詳細(xì)信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應(yīng)其他答案。根據(jù)意見發(fā)表聲明；用參考資料或個人經(jīng)歷來支持他們。要了解更多，請查看我們關(guān)于撰寫精彩答案的提示。