Square table fitting in screen - html

Question

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:
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>

Answer 1

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

Answer 2

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