0

I am thinking of increasing height of td as its width grows so that I can have square cells in the table. Increasing table width is absolutely needed for another reason. So you see oval td(cell)s below but I hope to see them with circular border. Thank you in advance.

<html>
<body>
<head>
<style>
  td{
  border: 1px solid #ddd;
  border-width: 1px;
  background: blue;
  color: white;
  border-radius: 50%;
  }
  table{
  border-collapse: collapse ;
  }
</style>
</head>
<table>
  <tr>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
  </tr>
    <tr>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
  </tr>

  <tr>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
  </tr>

  <tr>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
  </tr>

</table>
</body>
</html>
kamyarmg
  • 760
  • 2
  • 6
  • 23
  • The above answer .. `aspect-ratio: 1 / 1;` – Zak Jan 28 '22 at 18:38
  • What is the contents of your table? Is it tabular information? If not, it's probably better to use something like CSS grid rather than a table element. – Sean Jan 28 '22 at 18:39
  • And as @Sean mentioned -- Instead of a `table` useing a [GRID SYSTEM](https://getbootstrap.com/docs/4.0/layout/grid/) would make for a simpler layout. – Zak Jan 28 '22 at 18:41

1 Answers1

-1

You can use aspect-ratio for this.

<html>
<body>
<head>
<style>
  td{
  border: 1px solid #ddd;
  border-width: 1px;
  background: blue;
  color: white;
  border-radius: 50%;
  }
  table{
  border-collapse: collapse ;
  aspect-ratio: 2.5 / 1;
  }
</style>
</head>
<table>
  <tr>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
  </tr>
    <tr>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
  </tr>

  <tr>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
    <td>Square</td>
  </tr>
Pirate
  • 2,886
  • 4
  • 24
  • 42
  • Downvoting, as this question should be closed .. There is already an identical answer [HERE](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Zak Jan 28 '22 at 18:43
  • 1
    @Zak Answers should not be downvoted because you think the question should be closed. That's not what downvoting is for. – Sean Jan 28 '22 at 18:44
  • 1
    Not because I think the question should be closed .. Because I think the answer itself is not productive to the SO community, as OP has already been answered elsewhere. – Zak Jan 28 '22 at 18:46
  • @Pirate could you explain a bit why that particular aspect ratio is the one to use - as I see it there is a missing bit top and bottom of each circle (though I do think you have basically achieved a circle). – A Haworth Jan 28 '22 at 19:18
  • I just did no of columns / total no of rows. – Pirate Jan 29 '22 at 20:38