Make table cells square

by

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

More Related Contents:

  1. Responsive CSS triangle with percents width
  2. How to style a div to be a responsive square? [duplicate]
  3. Maintain aspect ratio according to width and height
  4. background image, linear gradient jagged edged result needs to be smooth edged
  5. Maintain div aspect ratio according to height
  6. Does “display:none” prevent an image from loading?
  7. Responsive grid of hexagons
  8. Invert rounded corner in CSS?
  9. Transparent hollow or cut out circle
  10. How to skew element but keep text normal (unskewed)
  11. Common breakpoints for media queries on a responsive site
  12. Should I use max-device-width or max-width?
  13. Is the viewport meta tag really necessary?
  14. How to make 3-corner-rounded triangle in CSS
  15. What are the rules for CSS media query overlap?
  16. Wave (or shape?) with border on CSS3
  17. css grid of squares with flexbox
  18. How to create a curve on the top of a background?
  19. Automatically resize images with browser size using CSS
  20. Customize Bootstrap 4’s grid-system Breakpoints
  21. How to make a circle around content using CSS?
  22. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  23. Adjacent divs with angled borders? [duplicate]
  24. Can you apply a width to a :before/:after pseudo-element (content:url(image))?
  25. Responsive CSS Circles
  26. Creating an Isoceles Trapezoid shape
  27. How to code CSS media queries targeting ALL mobile devices and tablets?
  28. Sass and rounding down numbers. Can this be configured?
  29. Div with cut out edges, border and transparent background
  30. Double curved shape

Leave a Comment