Building a variable column/row table in css with a fixed size

Issue

I'm trying to implement a table in html with a Vue framework. I can modify a size variable with v-model, which changes the number of rows AND columns (the table must have the same number of rows and columns).

My problem is that I would want to make it so that it is displayed in the same size whether it is at the minimum number of rows and columns (which is 2) or it is at maximum rows and columns (which is 10). However I'm struggling when it comes to implementing this in CSS because I'm finding that at a certain amount the table gets bigger than at the beginning, and also it never starts being a square, it is always stretched.

This is the HTML of the table section:

`<section class="arena-preview">
    <table>
        <tr v-for="row in this.size">
            <td v-for="column in this.size"></td>
        </tr>
    </table>
</section>`

//And this is the corresponding CSS:

@media only screen and (min-width: 768px) {
    .arena-preview {
      flex: 3;
      max-width: 60%;
      overflow-x: auto;
    }
  }

.arena-preview {
    display: flex;
    justify-content: center;
    align-content: center;
    flex: 100%;
    box-sizing: border-box;
  }

table {
    width: 80%;
  }

  table, th, td {
    border: 1px solid;
    border-collapse: collapse;
  }

  th, td {
    padding: 15px;
  }

  td {
    max-width: 40px;
    max-height: 40px;
  }

I was expecting to fix the td size so that it would at least display as a square instead of a rectangle but I don't think you can fix the height in CSS. As you can see I'm pretty inexperienced with CSS so if there's a solution to my problem I would appreciate an explanation.

Thanks in advance!

Solution

updated CSS

/* Set the base styles */
table {
  width: 80%; /* Adjust this as needed */
  border-collapse: collapse;
  table-layout: fixed; /* Ensures fixed table layout */
}

  td {
  border: 1px solid;
  width: calc(100% / var(--size)); /* Set cell width */
  height: calc(100% / var(--size)); /* Set cell height */
  max-width: 40px; /* Limit cell max width */
  max-height: 40px; /* Limit cell max height */
  padding: 0; /* Remove padding */
}

/* Additional styles to maintain aspect ratio */
.arena-preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arena-preview table {
  max-width: 100%; /* Ensure the table does not exceed its container */
}

Next, assign the --size variable to a CSS custom property in your Vue template:

<section class="arena-preview" :style="{ '--size': size }">
  <table>
    <tr v-for="row in size" :key="row">
      <td v-for="column in size" :key="column"></td>
    </tr>
  </table>
</section>

The width and height of the table's cells are determined in this case using the --size variable. To fit your layout, adjust the table's width and other elements as necessary.

Answered By - Adil