Geek Answers Handbook

The table is not suitable for 100% height

Edit: updated with code in response

I have a table in which I need to fill in a 100% height and keep the width the same as the height. I use vh to try to 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, it occupies more than 100% of the height. How to fix it?

+5
source share
1 answer

You need to reset the default td padding browsers. I would recommend using CSS reset, for example normalize.css (HTML5Boilerplate link) , which does this for you:

 /* Tables /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; }
+4
source

More articles:


All Articles