Fit table that has dynamic size inside div with fixed size

Question

I have a square table whos size changes dynamically(For example, 2*2/3*3/4*4). I want to fix this dynamically changing table inside a div whose size is fixed to the screen size. I have tried giving a fixed height and width to the tableWrapper div, but that doesn't seem to work. How can I do this?

This is my code:

HTML:

<div class="tableWrapper">
<table>
    <tr *ngFor="let row of boardConfig">
        <td *ngFor="let cell of row" class="cell" [attr.id]="cell"></td>
    </tr>
</table>
<div class="endgame">
    <div class="text"></div>
</div>

CSS:

td {
border: 2px solid #333;
height: 200px;
width: 200px;
text-align: center;
vertical-align: middle;
font-family: "Comic Sans MS", sans-serif;
font-size: 100px;
cursor: pointer;
}

table {
border-collapse: collapse;
position: absolute;
table-layout: fixed;
/*     left: 25%;
top: 3%; */
}

table tr:first-child td {
border-top: 0;
}

table tr:last-child td {
border-bottom: 0;
}

table tr td:first-child {
border-left: 0;
}

table tr td:last-child {
border-right: 0;
}

.winner {
background-color: forestgreen;
}

.tie {
background-color: grey;
}

.endgame {
position: relative;
display: none;
width: 350px;
top: 120px;
background-color: rgba(205, 133, 63, 0.8);
position: absolute;
top: 38%;
left: 46%;
margin-left: -151px;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
border-radius: 5px;
color: white;
font-size: 2em;
}

Edit: For a better illustration, I'm attaching an image of my expectation
*Notice how the size of the table remains the same in 3*3, 4*4, 5*5 tables*

Answer 1

If you just want the table to have the full size of the screen, you should be looking at viewport units, wich act as % of the entire viewport, for instance, 100vh, means 100% of the screen height, and 100vw, is 100% of the screen width, which is what you probably want to use in this situation. Take a look at the following example:

*{
    margin: 0;
    box-sizing: border-box;
}

.tableWrapper{
    width: 100vw;
    height: 100vh;
}

td {
    border: 2px solid #333;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    font-family: "Comic Sans MS", sans-serif;
    font-size: 100px;
    cursor: pointer;
}

table {
    border: 10px solid;
    border-collapse: collapse;
    position: absolute;
    table-layout: fixed;
    height: 100%;
    width: 100%;
    background-color: lightgray;
}

table tr:first-child td {
    border-top: 0;
}

table tr:last-child td {
    border-bottom: 0;
}

table tr td:first-child {
    border-left: 0;
}

table tr td:last-child {
    border-right: 0;
}

.winner {
    background-color: forestgreen;
}

.tie {
    background-color: grey;
}

.endgame {
    position: relative;
    display: none;
    width: 350px;
    top: 120px;
    background-color: rgba(205, 133, 63, 0.8);
    position: absolute;
    top: 38%;
    left: 46%;
    margin-left: -151px;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-size: 2em;
}

<div class="tableWrapper">
        <table>
            <tr >
                <td  class="cell">1</td>
            </tr>
            <tr >
                <td  class="cell">1</td>
            </tr>
        </table>
        <div class="endgame">
            <div class="text"></div>
        </div>

And take a special look at the class .tableWrapper as well as the 100% width and 100% height that I added to the table.

Example 3*3:

*{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

.tableWrapper{
    width: 100vw;
    height: 100vh;
}

td{
    text-align: center;
    border: 1px solid;
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    border: 10px solid;
    height: 100%;
    width: 100%;
    background-color: lightgray;
}

   
    <div class="tableWrapper">
        <table>
            <tr >
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
            </tr>
            <tr >
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
            </tr>
            <tr >
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
            </tr>


        
        </table>
        <div class="endgame">
            <div class="text"></div>
        </div>
            

Example 4*4:

*{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

.tableWrapper{
    width: 100vw;
    height: 100vh;
}

td{
    text-align: center;
    border: 1px solid;
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    border: 10px solid;
    height: 100%;
    width: 100%;
    background-color: lightgray;
}

   <div class="tableWrapper">
        <table>
            <tr >
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
            </tr>
            <tr >
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
            </tr>
            <tr >
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
            </tr>

            <tr >
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
                <td  class="cell">1</td>
            </tr>
        
        </table>
        <div class="endgame">
            <div class="text"></div>
        </div>