Make table cells square

Question

How to ensure that each cell of table should become square without using fixed sizes? And be responsive when they change width.

table {
  width: 90%;
}
td {
  width: 30%;
}
tr {
  /** what should go here? **/
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
<table>

Answer 1

New answer :

To make the table cells square, you can use the aspect-ratio property on a div inside the td element. Like this :

table {
  width: 90%;
}
td {
  width: 33.33%;
  position: relative;
}
td .content {
  aspect-ratio: 1 / 1 ;
  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>

---

Previous answer :

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>

FIDDLE demo

Answer 2

Here is my code: http://jsfiddle.net/vRLBY/1/

The key is to use:

td { width: 33%; padding-bottom: 33%; height: 0; }
td div { position: absolute }

because padding-bottom is defined in terms of the width. More information: http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

Note: Previously I posted a not working code (see here). Thanks to @web-tiki for reporting the bug ;-)

Answer 3

If someone's looking for a solution that does not require fixed width property (even in percentage), here's what I came up with based on above answers and the link from approved answer:

td {
    height: 0;

    &:after, &:before {
        content: '';

        display: block;
        padding-bottom: calc(50% - 0.5em);
    }
}

It's kinda lame but it kills two birds with one stone:

• does the trick
• makes content aligned vertically

Answer 4

td {
    display: inline-block; <--- this is the secret
    width:10px;
    height:10px;
    overflow: hidden;
}