javascript - 如何消除 block div 之间的所有空间？

Question

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

这是 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 而不是表格(请参阅下面的其他 fiddle 或备用 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>