Make Table Cells Square

Make table cells square

You can use the technique described in: Grid of responsive squares.

Adapted to your usecase with a table and square table cells, it would look like this:

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>

Table of fixed size with square cells and centered content

I'd simplify the code. I've removed a lot the positioning code and other stuff in favor of simple table properties. I'm using CSS Variables here so that it's easier to demonstrate changing the values, but you needn't use them if you need to support Internet Explorer, for instance.

I also added some code that increases the size of the table and its font when you click to show the centering works at a variety of sizes.

var fontSize = '1.5';document.body.addEventListener('click', () => {  var css = fontSize === '1.5' ?    '--table-size: 300px; --font-size: 4rem;' :    '--table-size: 180px; --font-size: 1.5rem;';  fontSize = fontSize === '1.5' ? '4' : '1.5';  document.documentElement.style.cssText = css;});

:root {  --table-size: 180px;  --font-size: 1.5rem;}
table {  width: var(--table-size);  height: var(--table-size);  margin: auto;  border-collapse: collapse;  font-size: var(--font-size);}
td,th {  border: 1px solid;  text-align: center;  vertical-align: middle;  white-space: nowrap;  width: calc(var(--table-size) / 3);  max-width: calc(var(--table-size) / 3);  max-height: calc(var(--table-size) / 3);  overflow: hidden;}
th {  background: yellow;}
th div {  color: red;}

<table>  <tr>    <th>      <div>+</div>    </th>    <th>      <div>0</div>    </th>    <th>      <div>1</div>    </th>  </tr>  <tr>    <th>      <div>0</div>    </th>    <td>      <div>0</div>    </td>    <td>      <div>1</div>    </td>  </tr>  <tr>    <th>      <div>1</div>    </th>    <td>      <div>1</div>    </td>    <td>      <div>10</div>    </td>  </tr></table>

Make a HTML Table have items be square based on the screen size using CSS?

You could use vh (viewport height) units. 1vh is 1% of the height of the viewport.

Edit: add code example.

td {
  height: 33vh;
  width: 33vh;
}

Make Table Cells (Not 3x3, 2x4!) Square?

const adjustSquare = () => {
    let squareWidth = document.querySelector('.menu.right').offsetHeight / 4;
    document.getElementById('stattab').style.maxWidth = (squareWidth * 2) + 'px';
}

document.onreadystatechange = () => {
    if (document.readyState == 'interactive') {
        adjustSquare()
    }
}

window.onresize = adjustSquare

.menu {
    background: #222222;
    position: absolute;
    top: 50%;
}
.menu.right {
    width: 25%;
    height: 70%;
    top: 5%;
    right: 0;
    float: right;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    justify-content: center;
}
#statwrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    padding: 5px;
    justify-content: center;
    align-items: center;
}
#stattab {
    width: 100%;
    height: 100%;
    flex: 1;
    border-spacing: 10px 10px;
}
.statcell {
    background: #333333;
    border-radius: 15px;
    width: 50%;
    position: relative;
}
.statcell .square {
    padding-top: 100%;
}
.statcell .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    color: #ffffff;
}

<div class="menu right">
  <div id="statwrap">
    <table id="stattab">
      <tbody id="statbody">
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

How to make a table with square cells responsive?

Well, after doing some look into, I've a solution suitable for my problem: using jquery.

function windowReszie(){
   var size =$("td").width();
   $("td").height(size);
}

Then add this fuction on window's resize event and it is done

$(window).on('resize', function(){windowReszie()});

Get each td square to any table width

This should be fairly simple, using the techniques from Grid of responsive squares for a grid of responsive squares.

EDIT Tested it out here: https://jsfiddle.net/MarkSchultheiss/w28nuuk5/

Here is the CSS adapted from yours:

#calendar
{
    width: 100%;
}
td {
  width: 14%;
  position: relative;
      text-align: center;
         padding: 10px;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}
td a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  color:black;
   padding: 10px;
}
#calendar caption
{
    color: white;
    background-color: #e74c3c;
}
#calendar tr td a:hover
{
    background-color: red;
}

How to create a responsive table of square cells using HTML and CSS

I think you should use divs in a simple grid. This code "margin:-1px 0 0 -1px;" solves the border duplications.

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .table-grid {
                display:grid;
                grid-template-columns: repeat(8, 1fr);
                text-align:center;
            }
            .table-grid-cell {
                border:1px solid grey;
                margin:-1px 0 0 -1px;
                padding:5px;
            }
            .table-header-cell {
                font-weight: bold;
            }
            @media screen and (max-width:540px) {
                .table-grid-cell {
                    padding:0px;
                }
            }
        </style>
    </head>
    <body>
        <div class="table-grid">
            <div class="table-grid-cell table-header-cell">Header</div>
            <div class="table-grid-cell table-header-cell">Header</div>
            <div class="table-grid-cell table-header-cell">Header</div>
            <div class="table-grid-cell table-header-cell">Header</div>
            <div class="table-grid-cell table-header-cell">Header</div>
            <div class="table-grid-cell table-header-cell">Header</div>
            <div class="table-grid-cell table-header-cell">Header</div>
            <div class="table-grid-cell table-header-cell">Header</div>
    
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
    
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
    
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
            <div class="table-grid-cell">Data</div>
        </div>
    </body>
    </html>

Square table fitting in screen

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>

Make Table Cells Square