Faire des cellules de table carrées
comment s'assurer que chaque cellule de la table doit devenir carré sans utiliser des tailles fixes? Et responsive quand ils changent de largeur.
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>
23
demandé sur
web-tiki
2014-04-03 14:56:56
2 réponses
Vous pouvez utiliser la technique décrite dans: Grille de réactif carrés.
adapté à votre usecase avec une table et cellules de table carrées, il devrait ressembler à ceci:
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>
46
répondu
web-tiki
2017-05-23 12:17:55
http://jsfiddle.net/vRLBY/1/
La clé est d'utiliser:
td { width: 33%; padding-bottom: 33%; height: 0; }
td div { position: absolute }
parce que padding-bottom
est définie en termes de largeur. Plus d'informations: http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
Remarque: précédemment j'ai posté un code qui ne fonctionne pas (voir ici). Merci à @web-tiki d'avoir signalé le bug; -)
5
répondu
Stephan Kulla
2014-04-03 15:03:02