Table not fitting to 100% height

Question

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?

Answer 1

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;
}

Table not fitting to 100% height

Question

1 answers

solution1
4 2016-08-09 20:09:40

Table not fitting to 100% height

Question

1 answers

solution1 4 2016-08-09 20:09:40

solution1
4 2016-08-09 20:09:40