I'm trying to scale a js generated table to a div's height and width. I've tried some solutions online but none worked for me. (the table is x*x depends on user input)
so far I've only mannaged to scale the table on width but not the height.
this is what I did:
div
{
max-width: 70vw;
max-height: 90vh;
overflow-x: auto;
}
td {
width: 200px;
height: 200px;
border-radius: 20px;
background-color: #d5bbee;
}
table{
width: 100%;
height: 100%;
border-radius: 20px;
border-spacing: 15px;
border-collapse:separate;
background-color:rgb(102, 184, 211) ;
border-color: transparent;
}<div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>the width of every cell is somehow scaled to fit the width of the table, but the height of every cell is still 200px so it acts diffrently. Iv'e tried table-layout:fixed and overflow:hidden but nothing have the same affect on the height.
I do want the table to only scale if it's going to become larger than the div.
thanks for any help :]
You need to set parent div height. Currently, it will expend only if necessary.
div
{
max-width: 70vw;
max-height: 90vh;
height: 90vh;
overflow-x: auto;
}
td {
width: 200px;
border-radius: 20px;
background-color: #d5bbee;
}
table{
width: 100%;
min-height: 100%;
border-radius: 20px;
border-spacing: 15px;
border-collapse:separate;
background-color:rgb(102, 184, 211) ;
border-color: transparent;
}<div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>