如何摆脱HTML表格中各行之间的空间？

Question

I am writing a little page which uses JQuery to generate a 16x16 table. 我正在写一个小页面，它使用JQuery生成一个16x16的表。 Then, if you hover over a cell it will change colour. 然后，如果将鼠标悬停在单元格上，它将改变颜色。 I have looked through lots of questions about this, and tried many things but they do not work, so I thought the most direct way was just to ask myself. 我浏览了很多与此有关的问题，并尝试了许多方法，但这些方法均无效，因此我认为最直接的方法就是问自己。 Here is my code: 这是我的代码：

JQuery: JQuery的：

$(document).ready(function() {
  for(var i = 0; i < 16; i++) {
    $('table').append('<tr>');
    for(var j = 0; j < 16; j++) {
      $('table').append("<td></td>");
    }
    $("table").append("</tr>");
  }
  $('td').hover(function() {
    $(this).css("background-color", "black");
  });
  $('.clearButton').click(function() {
    $('td').css("background-color", "white");
  });
});

CSS: CSS：

/*resets*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: ' ';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*EVERYTHING ELSE*/
td {
  background-color: white;
  border: 1px solid black;
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

table {
  min-width: 500px;
  max-width: 500px;
  min-height: 500px;
  max-height: 500px;
  border-collapse: collapse;
}

HTML: HTML：

<!DOCTYPE html>
<HTML>
  <HEAD>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </HEAD>
  <BODY>
    <button class="clearButton">RESET</button>
    <table>
    </table>
  </BODY>
</HTML>

Thanks in advance! 提前致谢！

Answer 1

You're appending your <td> s to <table> , instead of appending them to <row> s. 您将<td>附加到<table> ，而不是将它们附加到<row> 。

Here's how to fix this: 解决方法如下：

$(document).ready(function() {
  for(var i = 0; i < 16; i++) {
    var tr = $('<tr />')
    for(var j = 0; j < 16; j++) {
      tr.append($('<td />'));
    }
    $("table").append(tr);
  }
  $('td').hover(function() {
    $(this).css("background-color", "black");
  });
  $('.clearButton').click(function() {
    $('td').css("background-color", "white");
  });
});

jsFiddle . jsFiddle 。

Note: I would make the border equally visible in both states, by giving it a gray color. 注意：通过将其设置为灰色，可以使边框在两种状态下均相等可见。 See this version . 看到这个版本。

Answer 2

Change your script like this: 像这样更改脚本：

  $(document).ready(function () {
    var content = '';
    for (var i = 0; i < 16; i++) {
        content += '<tr>';
        for (var j = 0; j < 16; j++) {
            content += '<td></td>';
        }
        content += '</tr>';
    }
    $('table').append(content);
    $('td').hover(function () {
        $(this).css("background-color", "black");
    });
    $('.clearButton').click(function () {
        $('td').css("background-color", "white");
    });
});

please check demo 请检查演示

Answer 3

You are using the append method which automatically closes the tag if you didn't provide one. 您正在使用append方法，如果没有提供该方法，它将自动关闭标签。 You have to create the html string & then append to the table. 您必须创建html字符串，然后附加到表中。 You can use this 你可以用这个

$(document).ready(function() {
    var html = '';
    html += '<tbody>'
  for(var i = 0; i < 16; i++) {
    html += '<tr>';
    for(var j = 0; j < 16; j++) {
      html += "<td></td>";
    }
    html += "</tr>";
  }
  html += '</tbody>';
  $('table').append(html)
  $('td').hover(function() {
    $(this).css("background-color", "black");
  });
  $('.clearButton').click(function() {
    $('td').css("background-color", "white");
  });
});

Also check the fiddle https://jsfiddle.net/ok1n29ua/ 还要检查小提琴https://jsfiddle.net/ok1n29ua/

Answer 4

First of all, give your td some padding 首先，给您的TD一些填充

td{padding:5px;}

Second, you need to insert td inside the rows, your current script inserts them after the rows: 其次，您需要在行内插入td，当前脚本将它们插入行后：

$('table').find('tr').eq(i).append("<td> </td>");

And third, always include your css files before js file: 第三，始终在js文件之前包含css文件：

如何摆脱HTML表格中各行之间的空间？

问题描述

4 个解决方案

解决方案1
2 已采纳 2017-05-01 12:15:10

解决方案2
2 2017-05-01 12:29:32

解决方案3
1 2017-05-01 12:20:36

解决方案4
1 2017-05-01 12:33:39

如何摆脱HTML表格中各行之间的空间？

问题描述

4 个解决方案

解决方案1 2 已采纳 2017-05-01 12:15:10

解决方案2 2 2017-05-01 12:29:32

解决方案3 1 2017-05-01 12:20:36

解决方案4 1 2017-05-01 12:33:39

解决方案1
2 已采纳 2017-05-01 12:15:10

解决方案2
2 2017-05-01 12:29:32

解决方案3
1 2017-05-01 12:20:36

解决方案4
1 2017-05-01 12:33:39