Question

我尝试了很多在这里和Google中找到的解决方案，但是没有一个可以使用。该表由jQuery和Javascript动态生成。

问题： 如何删除此html表格中单元格之间的边框？

这是HTML代码：-

library(urltools)

url <- c("https://ulla.google.com", "https://test-maps.google.com") 

sapply(url, function(x) gsub(paste0(scheme(x), "://"), "", host_extract(x)$host), USE.NAMES = FALSE)

[1] "ulla"      "test-maps"

这是CSS代码

<div class="board">
     <table id="tableGame">

     </table>
</div>

下面的JavaScript代码

.board{
    float:left;
    display: inline-block;
}

table{
    border-collapse: collapse;
}

table tr, td{
    border: 0px;
}

链接到下面的jsfiddle。

问题不在于第三条白线（它仅出现在js小提琴中，如果我在浏览器中将其打开，它们看起来像一张普通表）。

问题仅在于删除单元格之间的那个令人烦恼的填充。

jsfiddle

在Codepen中，您会看到更好的效果，而不会出现行错误。

codepen

Answer 1

问题似乎出在您的JavaScript的第80行上。

$("#tableGame").append("<tr><td>"+ map[i] + "<td></tr>")

您要将数组（map[i]）连接成字符串。默认情况下，JavaScript用join用逗号“字符串化”。

上面的代码如下：

$("#tableGame").append("<tr><td>"+ map[i].join() + "<td></tr>")

因为默认的连接字符串是逗号，所以等效于

$("#tableGame").append("<tr><td>"+ map[i].join(',') + "<td></tr>")

要摆脱逗号，只需将其与空字符串连接起来

$("#tableGame").append("<tr><td>"+ map[i].join('') + "<td></tr>")

Answer 2

在HTML中，border元素上有属性cellpadding，cellspacing和<table>。将它们设置为0。<table border="0" cellpadding="0" cellspacing="0">。

边框是边框宽度。

Cellpadding用于表单元格中的填充。

Cellspacing用于表格单元格之间的空间。

Answer 3

css：

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

如何从表格单元格中删除填充和边框？

3 个答案: