cssresponsive-designcss-shapesaspect-ratio

Make table cells square


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>


Solution

  • 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