Question

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

我现在就是：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在你的CSS中：

table {
    border-collapse: collapse;
}

Answer 2

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

删除网格单元格之间的空间

2 个答案: