Jul*_*iet 5 html javascript css
编辑:更新了代码中的代码
我有一张桌子,我需要填充100%的高度并保持宽度与高度相同.我正在vh尝试实现这一目标.
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>然而,这占据了100%的高度.我该怎么解决这个问题？
您需要重置浏览器默认td padding值。我建议您使用 CSS 重置，例如normalize.css（链接到 HTML5Boilerplate），它可以为您做到这一点：
/* Tables
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}