比率を保ったまま収縮するtableを作りたい

Question

添付のサイトのように、ビューポートの幅を変えても、正方形の比率を保ったままビューポートに付随するtableとdivを作りたいのですが、どのようなコードを書いたらいいか分かりません。

http://yuka141247.html.xdomain.jp
※添付サイトはimgを置いているだけです。

<div class="wrap">
  <table>
    <tr><th colspan="7">2021/6</th></tr>
    <tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr>
    <tr><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
    <tr><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
    <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
    <tr><td>28</td><td>29</td><td>30</td><td></td><td></td><td></td><td></td></tr>
  </table>
  <div></div>
</div>

.wrap {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.wrap table {
  width: 490px;
  height: 490px;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid black;
  text-align: center;
}

.wrap table td, .test table th{
  border: 1px solid black;
}

.wrap div {
  width: 490px;
  height: 490px;
  background-color: #2cb4ad;
}

Answer 1

とりあえずそれっぽく動くものを...
widthとheightに使われている単位をvw(ビューポートのwidthに対する割合)にしただけです。
pxでやるならjsでビューポートなりに変更が生じたときに起動する縦横比を合わせるためのイベントを仕込むしか無いのかなぁ...と思います。

.wrap {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.wrap table {
  width: 50vw;
  height: 50vw;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid black;
  text-align: center;
}

.wrap table td, .test table th{
  border: 1px solid black;
}

.wrap div {
  width: 50vw;
  height: 50vw;
  background-color: #2cb4ad;
}

Comments

[yukarichang]

vwを使うことによって正方形のままレスポンシブにできることは初耳でした。ありがとうございました。しかし、親要素にwidth:80%を指定することによってdivがえぐれて正方形を保てませんでした…

[2ckD]

.wrap tableのheightを38vwくらいにするととりあえずそれっぽくなります。

以下は補足です。
tableは中にある文字のフォントやフォントサイズによってもtdのwidth、heightが変化するので、見るブラウザやOSが変われば多少ズレます。
投稿者様が提示されたものも数pxではありますが各tdのwidthはバラバラです。
もしこの誤差を許容できないなら上に書いたとおり、細かく設計する必要があります。