CODEWITHSUNDEEP
htmlcsshtml-table
krmax44
krmax44

Reputation: 334

Square table fitting in screen

I want to create a table which is square and contains of squares. The whole table must fit inside the window without scrolling. It's a bit hard to explain, here is an image what I want:

Image

Is that possible? Until now, I have this but it is not really what I want...

FIDDLE

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>

Upvotes: 2

Views: 2498

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

if it is to fill entire height :

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>

but if it comes into portrait , you might need js to find out ratio of window (landscape/portrait to overwrite style sheets rules). the use of mediaqueries for orientation to reset width to vw units will be needed too

Upvotes: 1

fnune
fnune

Reputation: 5514

This will work with some jQuery: https://jsfiddle.net/rs136ksc/4/ Changed your rows to 3 (3x3 now).

The jQuery snippet makes your table's width exactly as much as your height. The table's height is exactly the window's height. This only works every time you load the page, so if you want it to be persistent you'll have to figure out some more jQuery. Good luck!

Some of the added CSS:

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'
});

Upvotes: 0

Related Questions