How to create a dynamically resizing table element in html and css

Question

I am creating a crossword generator and aim to use HTML and CSS, along with Jinja2 templates to represent the crossword.

I have chosen to use the table element to represent the crossword (the crossword is always square):

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

I have had trouble making this table fill the screen appropriately; I am trying to make it expand outwards equally until it cannot expand any further, with a little bit of padding on either sides.

Could anyone help me write some CSS to ensure the table expands outwards dynamically, retaining a square shape, keeping a bit of padding on both sides and keeping all <td> elements an equal size?

Answer 1

Something like that ?

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>