CODEWITHSUNDEEP
javascripthtmlcss
Julian Lachniet
Julian Lachniet

Reputation: 323

Table not fitting to 100% height

Edit: Updated with code in answer

I have a table that I need to fill 100% height and keep the width the same as the height. I'm using vh to try and accomplish this.

index.html:

var board = document.getElementById('board');
var draw = '';
var letters = 'abcdefgh';
var init = '♖♘♗♕♔♗♘♖♙♙♙♙♙♙♙♙                                ♟♟♟♟♟♟♟♟♜♞♝♛♚♝♞♜';
for (var column = 8; column > 0; column--) {
  draw += '<tr id="' + column + '" class="row">';
  for (var row = 0; row < 8; row++) {
    draw += '<td id="' + letters.charAt(row) + column + '" class="tile">' + init.charAt(row + 8 * column - 8) + '</td>';
  }
  draw += '</tr>';
}
board.innerHTML = draw;
html,
body, td, th {
  margin: 0;
  padding: 0;
}
#board-wrapper,
#board {
  border-spacing: 0;
  float: left;
  height: 100vh;
  width: 100vh;
}
.tile {
  background-color: #fff;
  font-size: 6vh;
  height: 12.5vh;
  width: 12.5vh;
  text-align: center;
}
.row:nth-child(even) .tile:nth-child(odd),
.row:nth-child(odd) .tile:nth-child(even) {
  background-color: #777;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>TitaniumChess</title>
  <meta charset="UTF-8">
  <link href="default.css" rel="stylesheet" type="text/css">
</head>

<body>
  <table id="board-wrapper">
    <tbody id="board"></tbody>
  </table>
  <script src="main.js">
  </script>
</body>

</html>

However, this takes up more that 100% height. How should I fix this?

Upvotes: 5

Views: 126

Answers (1)

Vucko
Vucko

Reputation: 20844

You need to reset the browsers default td padding value. I'd recommend that you use a CSS reset, like normalize.css (link to HTML5Boilerplate) which does that for you:

/* Tables


/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

Upvotes: 4

Related Questions