Make table cells square - css

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

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