Quiero crear una tabla que sea cuadrada y contenga cuadrados. Toda la tabla debe caber dentro de la ventana sin desplazarse. Es un poco difícil de explicar, aquí hay una imagen que quiero:

Image

¿Es eso posible? Hasta ahora tengo esto pero no es realmente lo que quiero ...

VIOLÍN

table {
  width: 100%;
}

td {
  width: 30%;
  position: relative;
}

td:after {
  content: '';
  display: block;
  margin-top: 100%;
}

td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

td img {
  width: 100%;
  height: 100%;
}
<table>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
</table>
2
krmax44 25 ene. 2016 a las 22:21

2 respuestas

La mejor respuesta

Si es para llenar toda la altura:

body {
  margin: 0;
}

table {
  margin: auto;
  width: 100vh;
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  width: 33.33%;
}

img {
  width: 100%;
  display: block;
}

/* take care of portrait orientation or ratio */

html {
  height: 100%;
  display: flex;
}

body {
  margin: auto;
}

table {
  max-width: 100vw;
}
<table>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
</table>

Pero si aparece en vertical, es posible que necesite js para averiguar la proporción de ventana (horizontal / vertical para sobrescribir las reglas de las hojas de estilo). También se necesitará el uso de mediaqueries para la orientación para restablecer el ancho a las unidades vw

1
G-Cyrillus 26 ene. 2016 a las 18:54

Esto funcionará con algunos jQuery: https://jsfiddle.net/rs136ksc/4/ Cambió sus filas a 3 (3x3 ahora).

El fragmento de jQuery hace que el ancho de su tabla sea exactamente igual a su altura. La altura de la mesa es exactamente la altura de la ventana. Esto solo funciona cada vez que carga la página, por lo que si desea que sea persistente, tendrá que descubrir más jQuery. ¡Buena suerte!

Algunas de las CSS agregadas: Algunos de los CSS agregados:

html, body {
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

table {
  margin:0 auto;
  height:100%;
}

Jquery:

var cw = $('.child').width();
$('.child').css({
    'height': cw + 'px'
});
0
Fausto NA 25 ene. 2016 a las 19:33