How to ensure that each cell of table should become square without using fixed sizes? And be responsive when they change width.HTML : 1
情報源: html - Make table cells square - Stack Overflow
table {
width:90%;
margin:auto;
}
td {
width:30%;
position:relative;
padding-top:0;
padding-bottom:0;
outline:1px solid #ccc;
}
td:after{
content:'';
display:block;
margin-top:100%;
}
td .content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
|
1 |
2 |
3 |
|
4 |
5 |
6 |
|
7 |
8 |
9 |