I have a big table, I'm going to try to make a game. I need all the table parts to be square, but the edges are more rectangular. I can't find anything to help fix this.

I've tried setting the max width and height of tr and th to 6.667vw(approx. 1/15 of the screen width) but the edge sizes are still too big to be the small round error. I've erased the width and height of tr and th to see if it was something of that, but that didn't work either. I have a lot of table elements, a 15x15, I am giving the smallest amount possible for my given problem; I am also adding the css.

Css:


* {

  margin: 0;

  padding: 0;

}

table {

  width: 100%;

  height: 100vw;

  border: 3px solid red;

  border-collapse: collapse;

}

tr th {

  border: 2px solid black;

}

HTML:


<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>Scrabble</title>

    <link rel="stylesheet" href="style.css"

  </head>

  <body>

    <div >

      <div >

        <table>

          <tr >

            // 15 <tr> elements with

            // incrementing 'col#' classes

          </tr>

          <tr > // class 'row#' incremented by 1

            // 15 <tr> elements

          </tr>

          // 13 more <tr> elements with

          // incrementing 'row#' classes

        </table>

      </div>

      <div ></div>

    </div>

  </body>

</html>

Sorry for the html with no elements, I wanted to keep it concise while giving you enough detail to replicate. The class names have no functionality, but I included them because they are in my code. I hope this is enough.

CodePudding user response：

First thing to note is you shouldn't really use a <table> to make your game board. A <table> should be used for displaying tabular data. More information about tables on MDN.

I would advise using display:grid to make your board instead. More information about grid layout on MDN.

I have created a codepen to use as a starting point. The code is also shown below.

HTML

<div >
    <div >
        <div ></div>
        <!-- 224 more .square elements to make your 15 x 15 board -->
    </div>
</div>

CSS

.game {
    padding: 20px; // just to add some breathing space to the demo
    display: grid;
    place-content: center;
}

.board {
    display: grid;
    grid-template-columns: repeat(15, 5vmin); // substitute 5vmin for whatever size you like, just make sure to use the same value for grid-template-rows
    grid-template-rows: repeat(15, 5vmin);
    border: 1px solid black;
}

.square {
    border: 1px solid black;
}