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

就目前而言，桌子的每一行之间都有空白区域，我想将其删除。任何人都可以提供如何实现这一目标的建议吗

我尝试过的事情：

reset.css个文件。

使用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;来消除表中的默认边框。

这是一个有效的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<div>

的替代示例

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: