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

Tomas
January 21, 2024
264 views
2 votes
4 Answers

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?

Answers

table {
  border-collapse: collapse;
  margin: auto;
  width: 80%;
  aspect-ratio: 1 / 1;
  table-layout: fixed;

}

td {
  border: 1px solid;
  text-align: center;
  position: relative;
  aspect-ratio: 1 / 1;
}

/* .ruller and its styles are for demonstration purposes only */
.ruller {
  overflow: hidden;
  resize: horizontal;
  text-align: right;
  margin: auto;
  width: 300px;

}

<div class="ruller">
  <table>
    <tr>
      <td><span>W</span></td>
      <td><span>A</span></td>
      <td><span>L</span></td>
      <td><span>L</span></td>
    </tr>
    <tr>
      <td><span>I</span></td>
      <td><span>R</span></td>
      <td><span>O</span></td>
      <td><span>N</span></td>
    </tr>
    <tr>
      <td><span>N</span></td>
      <td><span>-</span></td>
      <td><span>-</span></td>
      <td><span>-</span></td>
    </tr>
    <tr>
      <td><span>G</span></td>
      <td><span>R</span></td>
      <td><span>I</span></td>
      <td><span>L</span></td>
    </tr>
  </table>
  resize container here ↘
</div>

I hope I understood you correctly and you need the aspect-ratio property along with table-layout: fixed;

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>

You can try the css like this,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Crossword Puzzle</title>
    <style>
      table {
        margin: 2em;
        --td-siz: 2em;
        border-collapse: separate;
        border-spacing: 1px;
        background-color: black;
      }

      table td:not(:empty) {
        background: white;
        width: var(--td-siz);
        height: var(--td-siz);
        text-align: center;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>W</td>
        <td>A</td>
        <td>L</td>
        <td>K</td>
      </tr>
      <tr>
        <td>I</td>
        <td>R</td>
        <td>O</td>
        <td>N</td>
      </tr>
      <tr>
        <td>N</td>
        <td>E</td>
        <td>C</td>
        <td>K</td>
      </tr>
      <tr>
        <td>T</td>
        <td>A</td>
        <td>K</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

The block defines styles for the table, including margin, cell size (--td-siz variable), border-collapse, border-spacing, and background color.
The table td:not(:empty) block styles non-empty cells within the table. It sets the background-color, width, height, text-align, and text-transform properties. The :not(:empty) selector ensures that only non-empty cells are styled.
The actual crossword puzzle is represented within the <table> element, with each letter placed in a separate cell. Empty cells are represented with <td></td>.

table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto; 
        }

        th, td {
            border: 1px solid #ddd; 
            padding: 8px; 
            text-align: left; 
        }
        @media (max-width: 600px) {
            th, td {
                display: block;
                width: 100%; 
                box-sizing: border-box;
            }
        }

<table>
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info 1</td>
            <td>Info 2</td>
            <td>Info 3</td>
        </tr>
    </tbody>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.