删除网格单元格之间的空间[重复]

Question

我想删除单元格之间的空格，使网格看起来有点像方格纸。现在单元格之间有一个小空间，我想删除它。

这是我现在拥有的：

function generateGrid(rows, cols) {
  var grid = "<table>";
  for (row = 1; row <= rows; row++) {
    grid += "<tr>";
    for (col = 1; col <= cols; col++) {
      grid += "<td></td>";
    }
    grid += "</tr>";
  }
  return grid;
}

$("#tableContainer").append(generateGrid(5, 5));

$("td").click(function() {
  var index = $("td").index(this);
  var row = Math.floor((index) / 5) + 1;
  var col = (index % 5) + 1;
  $("span").text("That was row " + row + " and col " + col);
  $(this).css('background-color', 'red');
});

td {
  border: 1px solid;
  width: 50px;
  height: 50px;
}

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

<span>Select a cell!</span>
<div id="tableContainer"></div>

Answer 1

在您的 CSS 中：

table {
    border-collapse: collapse;
}

Answer 2

table {
    border-collapse: collapse;
}
th, td {
    padding: 0;
}