如何消除块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>