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