Question

我正在尝试生成具有随机大小的表格，例如 n * n ，其中n可以介于3到7之间。这些表应该是响应性的，应该完全适合任何设备屏幕。

问题：
当生成表格时，所有单元格都被挤压，如果我将数据添加到任何单元格中，其他单元格会在特定单元格扩展时挤出。

我想要的是什么：
我希望所有单元格的形状也是响应和正方形。通过平方我的意思是当生成表时，每个单元格应该是width = height。整个表格应该非常适合视口。

我做了什么：
我使用了一些JS来使每个单元格具有反复性，但是在较大的屏幕上，每个单元格都变得很大，导致一个巨大的表格溢出视口的高度。

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。

Answer 1

您希望表格单元格为正方形，每行只有三个单元格。每行的宽度分配给高度。它显然会创造巨大的盒子。如果不需要方框，则可以手动设置框的高度，使它们看起来不会太大。

空桌子被压缩了

1 个答案: