HTML table fitting screen height with squared cells

Question

 var grid = document.getElementById("grid");
 var size = 50;

 for (var y = 0; y < size; y++) {
  var currentRow = grid.insertRow(0);
  for (var x = 0; x < size; x++) {
   var currentCell = currentRow.insertCell(-1);
   currentCell.style.height = currentCell.style.width = `calc(100vh / ${size})`;
   currentCell.style.backgroundColor = (x+y)%2 == 0 ? "Blue" : "Red";
  }
 }

body {
 margin: 0;
}

table#grid {
 border-collapse: collapse;
 height: 100%; 
}

<html>
 <body>
  <table id="grid" align="center"></table>
 </body>
</html>

What I need is a table that fits screen height and has squared cells. I tried almost everything, the best result I got using hidden images. The cells are almost squared, not enough for my needs though. Of course I don't want to use any absolute spacing. In fact I would like to do it without images too, just plain CSS/JavaScript. The size of the table will just be known at runtime, but let's assume it's 2 by 2:

<table>
    <tr>
        <td><img src='placeholder.png'></td>
        <td><img src='placeholder.png'></td>
    </tr>
    <tr>
        <td><img src='placeholder.png'></td>
        <td><img src='placeholder.png'></td>
    </tr>
</table>

And in the CSS

table {
    height: 100%;
}

img {
    height: 100%;
    width: auto;
    visibility: hidden
}

Any ideas (that are not too over-sophisticated) are very much appreciated.

Possible duplicate of [Grid of responsive squares](https://stackoverflow.com/questions/20456694/grid-of-responsive-squares) — Nils Kähler, Mar 10 '19 at 20:54
This has been answered here https://stackoverflow.com/questions/22835430/make-table-cells-square — codeKracken, Mar 10 '19 at 20:58
Don't think so because what I need is vertical fitting and `padding-left` doesn't work — Don Fuchs, Mar 10 '19 at 21:03
@cadeKracken I tried to adapt it to my case using `height: 100%` instead of `width: 100%` which breaks it — Don Fuchs, Mar 10 '19 at 21:07

score 0 · Accepted Answer · edited Mar 11 '19 at 02:54

0

You can use CSS calc to calculate height and width, I don't know if it is exactly what you want, but you can try it here:

.blue {
  background-color: blue;
}

.red {
  background-color: red; 
}

body {
    margin: 0;
}

td {
  height: calc(100vh / 2);
  width: calc(100vh / 2);
}

table {
    border-collapse: collapse;
}

<table>
    <tr>
        <td class="blue"></td>
        <td class="red"></td>
    </tr>
    <tr>
        <td class="red"></td>
        <td class="blue"></td>
    </tr>
</table>

You can also add some javascript code if you need to change your grid size, and calculate the new height and width of each cell.

edited Mar 11 '19 at 02:54

Don Fuchs

47
5

answered Mar 10 '19 at 21:17

ganjim

1,234
1
16
30

1

Thanks, that looks quite good and is even responsive. But it doens't fit 100% as there is some space around the table. What can I do? – Don Fuchs Mar 10 '19 at 21:25
I added `border-collapse: collapse;` to table but this is not enough – Don Fuchs Mar 10 '19 at 21:28
Okay, I got it, `body { margin: 0; }` does the trick. Now it's perfect, thanks alot! – Don Fuchs Mar 10 '19 at 21:32
Playing around a bit and using greater tables you find that the cells are squeezed when squeezing the window; the cells are then no longer squared. – Don Fuchs Mar 10 '19 at 22:03
But I reckon this is due to rounding errors and divisibility problems between viewport height and width – Don Fuchs Mar 10 '19 at 22:23
@DonFuchs looks like you found out how to do it yourself, just as you did you can remove the margin from body and clear the default style from table to achieve 100% height of the page. also, if there are any other stuff in your page you can use css reset to reset every default css in any browser – ganjim Mar 11 '19 at 10:35

HTML table fitting screen height with squared cells

1 Answers1