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

Question

In the fiddle below, I've created a 16x16 table using jQuery. table fiddle

Here is the CSS:

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

And here is the 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>');
        }
    }
});

As it stands, there is white space between each row of the table, and I would like to remove it. Can anyone offer advice on how to achieve this?

Things I've tried:

1. A reset.css file.

2. Using divs instead of a table (see this other fiddle or the alternate jquery below (CSS same as before but targeting has been changed to .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>'); } } }); 

So, can anyone help me remove the white space?

Answer 1

Part of the problem is that you're appending <td> to the <table> and not to the <tr> . Also, you should use border-collapse: collapse; to eliminate default borders from the table.

Here is a working example :

 $(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> 

Alternate example with <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>