我正在尝试生成具有随机大小的表格，例如 n * n，其中 n 可以在 3 到 7 之间。表格应该是响应式的并且应该完全适合任何设备屏幕。
问题:
生成表格时，所有单元格都会被挤压，如果我将数据添加到任何单元格中，其他单元格会在该特定单元格扩展时挤压。
我想要的:
我希望所有的单元格都响应并且形状也正方形。我所说的正方形是指生成表格时，每个单元格的宽度应为高度。整个表格应该很好地适合视口(viewport)。
我做了什么:
我使用了一些 JS 来使每个单元格响应，但在更大的屏幕上每个单元格都变得很大，导致表格很大，超出了视口(viewport)的高度。
HTML
<body>
<div class="site-wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
</nav>
<!--<div class="centerMe">-->
<div class="container">
<table id="board" class="table table-bordered">
<tr>
<td data-cell="0"></td>
<td data-cell="1"></td>
<td data-cell="2"></td>
</tr>
<tr>
<td data-cell="3"></td>
<td data-cell="4"></td>
<td data-cell="5"></td>
</tr>
<tr>
<td data-cell="6"></td>
<td data-cell="7"></td>
<td data-cell="8"></td>
</tr>
</table>
</div>
<!--</div>-->
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
/*$(document).ready(function() {
function resizetable() {
var newBoxHeight= $('td').outerWidth();
$('td').outerHeight(newBoxHeight);
}
resizetable();
$(window).resize(function () {
resizetable();
});
});*/
</script>
</body>
CSS
html, body {
height: 100%;
background-color: #333;
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
background-color: #ccbb99 !important;
overflow-y: auto;
}
.navbar {
border-radius: 0;
border: none;
background-color: #683F36;
}
.navbar-brand {
cursor: pointer;
color: #ffffff !important;
font-family: chalkitup, "sans-serif";
}
.centerMe {
position: relative;
top: 50%;
transform: translateY(-60%);
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
background-color: #ccbb99 !important;
}
#board, #board td {
border: none;
}
#board td:nth-child(2n + 1) {
border-left: 1px solid black;
border-right: 1px solid black;
}
#board td:first-child {
border-left: none;
}
#board td:last-child {
border-right: none;
}
#board tr {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#board tr:first-child {
border-top: none;
}
#board tr:last-child {
border-bottom: none;
}
@media (min-width: 768px) {
#board {
margin: 0 auto;
width: 70%;
}
}
注意:我使用的是 twitter-bootstrap 3。
最佳答案
您希望表格单元格为正方形并且每行中只有三个单元格。每行的宽度分配给高度。它显然会创建巨大的盒子。如果不需要方框，则可以手动设置方框的高度，使其看起来不会太大。
关于html - 空 table 被挤压，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42067740/