css - examples - title html

Hacer que las celdas de la tabla sean cuadradas.

Question

¿Cómo asegurar que cada celda de la tabla se convierta en cuadrada sin usar tamaños fijos? Y sé receptivo cuando cambien de ancho.

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>

Answer 1

Aquí está mi código: http://jsfiddle.net/vRLBY/1/

La clave es usar:

td { width: 33%; padding-bottom: 33%; height: 0; }
td div { position: absolute }

porque padding-bottom se define en términos de ancho. Más información: http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

Nota: Anteriormente publiqué un código que no funcionaba (vea here ). Gracias a @ web-tiki por informar el error ;-)

Answer 2

Puede utilizar la técnica descrita en: Cuadrícula de cuadrados sensibles .

Adaptado a su caso de uso con una tabla y celdas de tabla cuadrada , se vería así:

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>

FIDDLE demo