0
我想要生成具有随机大小的表，如n * n其中n可以在3到7之间。表应该是响应式的，并且应该完全适合任何设备屏幕。空表被挤压
问题：
当产生该表的所有单元格被挤压，而且如果我添加数据到任何细胞，其他细胞挤上去而特定细胞膨胀。
我想要什么：
我希望所有的细胞中响应和方的形状了。我的意思是当表格生成时，每个单元格应该是width = height。而整个桌子应该很适合视口。
我做了什么：
我用了一下JS，使每个单元reponsive但在更大屏幕上每个小区竟然是巨大的，产生了巨大的表，它溢出视口的高度。
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的引导3
我可以知道哪部分不清楚吗？ – Ayan