Javascript 如何消除块div之间的所有空格？

在下面的提琴中，我使用jQuery创建了一个16x16表。 桌上小提琴

以下是CSS：

td {
width: 30px;
height: 30px;
background-color: blue;
border: 1px solid red;
display: inline-block;
}

下面是jQuery：

$(document).ready(function() {
    $('body').append('<table></table>')
    for (var i=1; i<=16; i++) {
        $('table').append('<tr></tr>');
        for (var j=1; j<=16; j++) {
            $('table:nth-last-child(1)').append('<td></td>');
        }
    }
});

---

那么，有人能帮我删除空白吗？

部分问题是您将

附加到

而不是

上。 此外，还应使用

边框折叠：折叠

从表中删除默认边框

以下是一个工作示例：

$（文档）.ready（函数（）{
$（'body'）。附加（“”）
对于（var i=1；iSuper，这就解决了。还感谢您澄清我对
n个child
选择器如何工作的理解。关于如何使用两个
display:block
元素实现类似效果的建议，如我的备选示例所示？谢谢！我猜是
.addClass（'row'））
删除空格的行，除此之外，我看不出与我自己的尝试有什么显著区别？@adc
.addClass（'row'）
类似于您自己的
（“”）
，只是另一种方法。重要的部分是在CSS中，我使用
清除：两者；
在
上。行
确保每一行在不同的行上，并且
浮动：左；
在
上。容器
并排显示每个网格项。您还可以使用
显示：内联块；
而不是
浮动：left；
。
$(document).ready(function() {
    for (var i=1; i<=16; i++) {
        $('body').append('<div class="row"></div>');
        for (var j=1; j<=16; j++) {
            $('body:nth-last-child(1)').append('<div class="container"></div>');
        }
    }
});