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

debugcn 发表于 Dev

乐高

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

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

这是 HTML 代码：-

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

     </table>
</div>

这是 CSS 代码

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

table{
    border-collapse: collapse;
}

table tr, td{
    border: 0px;
}

下面的Javascript代码

function mapGenerate(){
    var map=createMap(); // this function returns a 2d array filled of random 1 and 0 

/* example 
map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]
*/    

        //loop the 2d array map and change the number with the appropriate img    
        for(var i = 0; i < map.length; i++) {
            var innerArrayLength = map[i].length;
            for(var j = 0; j<innerArrayLength; j++){
                //loop the nested arrays so i can change the 1 and the 0 with the appropriate img
                if(map[i][j] === 0){
                    map[i][j]="<img class=\"walkble\" src=\"mapTiles/floorResized.png\">"; //you can walk this part of the map
                }else{
                    map[i][j]="<img class=\"nonWalkble\"// you cannot walk This part of the map src=\"mapTiles/volcanoresize.png\">";
                }    
                ;
            }
            $("#tableGame").append("<tr><td>"+ map[i] + "</td></tr>") // Here i print the elements of the array
        }  
    }


mapGenerate();

在此处链接到 jsfiddle。

问题不在于第三条白线（它只出现在 js fiddle 中，如果我在浏览器中打开它，它们看起来就像一个普通的表格）。

问题只是删除单元格之间令人不安的填充。

提琴手

在 codepen 中你会看到它更好，没有行错误。

代码笔

维迪亚库马拉

看起来问题出在 JavaScript 的第 80 行。

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

您正在将一个数组 ( map[i]) 连接到一个字符串中。默认情况下，javascript 通过join用逗号对其进行“字符串化” 。

上面的代码是这样的：

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