How to ensure that each cell of table should become square without using fixed sizes? And be responsive when they change width.
table {
width: 90%;
}
td {
width: 30%;
}
tr {
/** what should go here? **/
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<table>
To make the table cells square, you can use the aspect-ratio property on a div
inside the td
element. Like this :
table {
width: 90%;
}
td {
width: 33.33%;
position: relative;
}
td .content {
aspect-ratio: 1 / 1 ;
background: gold;
}
<table>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
</table>
You can use the technique described in: Grid of responsive squares.
Adapted to your usecase with a table and square table cells, it would look like this:
table {
width: 90%;
}
td {
width: 33.33%;
position: relative;
}
td:after {
content: '';
display: block;
margin-top: 100%;
}
td .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: gold;
}
<table>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
</table>