Menu
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?
814
Here available space means space of it's parent control. If the height of the parent control is not 100% then height of the table couldn't be 100%. If you are trying to set 100% height of the table directly contained the body of a html page the you need to first set the height of the body and html.
The height of rows 'tr' in a table can be fixed very easily. This can be done by adding the height attribute in the tr tag. If the height is not specified, the height of the row changes according to the content. The height can be specified either in pixels, or percentage.
To manipulate the height or width of an entire table, place the size attribute (either "WIDTH=" or "HEIGHT=") within the <TABLE> code. To manipulate individual cells, place the size attribute within the code for that cell.
To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively. Just keep in mind, the usage of style attribute overrides any style set globally.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
