如何消除塊div之間的所有空間？

Question

在下面的小提琴中，我使用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>');
        }
    }
});

就目前而言，桌子的每一行之間都有空白區域，我想將其刪除。 任何人都可以提供如何實現這一目標的建議嗎

我試過的事情：

1. 一個reset.css文件。

2. 使用div而不是表格（請參閱下面的另一個小提琴或替代jquery（CSS與之前相同，但目標已更改為.container ）

    $(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>'); } } }); 

那么，任何人都可以幫我刪除空白區域嗎？

Answer 1

部分問題是您將<td>附加到<table>而不是<tr> 。 另外，你應該使用border-collapse: collapse; 消除表中的默認邊框。

這是一個工作示例：

 $(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 tr:nth-last-child(1)').append('<td></td>'); } } }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div>替代示例

 $(document).ready(function() { for (var i = 1; i <= 16; i++) { var $row = $('<div />') .addClass('row'); $('body').append($row); for (var j = 1; j <= 16; j++) { $row.append('<div class="container"></div>'); } } }); 

 div.row { clear: both; } div.container { width: 30px; height: 30px; background: #ccc; border: 1px solid #000; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>