Подогнать стол, который имеет размер Dynami c внутри div с фиксированным размером

Question

У меня есть квадратная таблица, размер которой динамически изменяется (например, 2 * 2/3 * 3/4 ​​* 4). Я хочу исправить эту динамически изменяющуюся таблицу внутри div, размер которого соответствует размеру экрана. Я попытался дать фиксированную высоту и ширину div tableWrapper, но это, похоже, не работает. Как я могу это сделать?

Это мой код:

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;
}

Редактировать : Для лучшей иллюстрации я прилагаю изображение моего ожидания
* Обратите внимание, что размер таблицы остается неизменным в 3 * 3, 4 * 4, 5 * 5 таблиц *

Answer 1

Если вы просто хотите, чтобы таблица имела полный размер экрана, вы должны смотреть на единиц просмотра , которые действуют как% от всей области просмотра, например, 100vh, означает 100% высота экрана, и 100vw, составляет 100% ширины экрана, что вы, вероятно, хотите использовать в этой ситуации. Взгляните на следующий пример:

*{
    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>

И обратите особое внимание на класс .tableWrapper , а также 100% ширину и Высота 100% , которую я добавил в таблицу .

Пример 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>
            

Пример 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>