如何在html和css中创建动态调整大小的表元素

发布于01月21日

我正在创建一个纵横字谜生成器，目标是使用HTML和CSS，以及JJIA2模板来表示纵横字谜.

我 Select 使用table元素来表示纵横字谜(纵横字谜始终是正方形):

<table class="table">
    {% for row in range(dimensions) %}
        <tr>
            {% for column in range(dimensions) %}
                <td>{{ . }}</td>
            {% endfor %}
        </tr>
    {% endfor %}
</table>

我在让这张桌子适当地填满屏幕时遇到了麻烦；我正试图让它平等地向外扩展，直到它不能再进一步扩展，两边都有一点填充.

有人能帮我写一些css来确保表格动态地向外扩展，保持正方形，在两边保留一点填充，并保持所有<td>个元素的大小相同吗？

推荐答案

像这样的事？

html {
  font-family     : Arial, Helvetica, sans-serif;
  font-size       : 16px;
  color           : black;
  }
table {
  margin           : 2em;
  --td-siz         : 2em;
  border-collapse  : separate;
  border-spacing   : 1px;       /* for cells borders */
  background-color : #252627;
  }
table td:not(:empty) {
  background : whitesmoke;
  width      : var(--td-siz);
  height     : var(--td-siz);
  text-align : center;
  text-transform : uppercase;
  }

<table>
  <tr> <td> W </td> <td> A </td> <td> L </td> <td> L </td> </tr>
  <tr> <td> I </td> <td> R </td> <td> O </td> <td> N </td> </tr>
  <tr> <td> N </td>   <td></td>  <td> c </td>   <td></td>  </tr>
  <tr> <td> G </td> <td> R </td> <td> I </td> <td> L </td> </tr>
</table>