CODEWITHSUNDEEP
htmlcsselectron
user1979117
user1979117

Reputation: 29

Make a HTML Table have items be square based on the screen size using CSS?

I'm currently making an electron app that requires a square grid of items (Sudoku). I've found solutions online for making the elements square, but that's based on width. And often times the width is going to be almost twice as big as the height, so based on that the grid items would go off the screen and I would not like that. I tried using

td{
height:11.11%;
padding-left:11.11%;
}

but it doesn't produce a square at all, in fact, the height becomes static at the minimum height if I do that. My question is how can I create a table that maintains square items based on height using CSS?

Upvotes: 0

Views: 2258

Answers (3)

Andreas Dolk
Andreas Dolk

Reputation: 114797

A table might not be a good idea for a sudoku grid. Tables have some limitations, especially with sizing. It's easier to build it with divs and a simple nested css grid.

Here's a fiddle for a rough idea: https://jsfiddle.net/Treverix/docy76gw/5/

The CSS looks like this:

.sudoku {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0 0;
  background-color: #2196F3;
  padding: 5px;
  width: 384px;
}

.sudoku-square {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  width: 126px;
  height: 126px;

  display: grid;
  grid-template-columns: repeat(9, auto);
  gap: 0 0;
}

.sudoku-cell {
  border: 1px solid rgba(0, 0, 0, 0.5);
  width: 12px;
  height: 12px;
  text-align: center;
}

Upvotes: 1

donkey
donkey

Reputation: 303

td is table-cell object, the width will change because table width.

so i edit its, now is square. see below

*{
      padding: 0;
      margin: 0;
    }
    table{
      width: 100%;
      border-collapse: collapse; 
    }
    td {
      display: inline-block;
      width: 20%;
      padding-bottom: 20%;
      /*
      width: calc(20% - 2px);
      padding-bottom: calc(20% - 2px);
      background-color: #ff0000; 
      border: 1px solid #000; 
      */
    }
    tr:nth-child(odd) td:nth-child(even){
      background-color: #0ff;
    }
    tr:nth-child(odd) td:nth-child(odd){
      background-color: #ff0;
    }
    tr:nth-child(even) td:nth-child(odd){
      background-color: #0ff;
    }
    tr:nth-child(even) td:nth-child(even){
      background-color: #ff0;
    }
<table >
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Upvotes: 0

cj81499
cj81499

Reputation: 76

You could use vh (viewport height) units. 1vh is 1% of the height of the viewport.

Edit: add code example.

td {
  height: 33vh;
  width: 33vh;
}

Upvotes: 1

Related Questions