删除表格元素中的白线答案

【问题标题】：Removing white lines in table element删除表格元素中的白线
【发布时间】：2021-03-29 15:42:43
【问题描述】：

我编写了一个 js 代码来制作表格以及 tds 和 trs，但它们之间有这些奇怪的白线，我很确定这是 CSS 属性之一的问题，但我就是找不到我想要的东西需要改变。我是一个初学者程序员。欢迎提供帮助，如果您对代码有改进，或者只是关于如何继续我的编程之旅的建议或其他内容，我将非常高兴:)

const board = document.getElementById("board");
let black = true;

for(let i = 1; i <= 8; i++){

    let row = document.createElement("tr");
  
    if(black){
        row.classList.add("black");
    }
    else{
        row.classList.add("black");
    }
    black = !black;
  
    board.appendChild(row);

    for(let j = 1; j <= 8; j++){

        let column = document.createElement("td");
      

        if(black){
            row.classList.add("black");
        }
        else{
            row.classList.add("white");
        }
        black = !black;
    
        board.appendChild(column);

    }
}

.black {
    background: black;
}

.white { 
    background: white;
}

table { 
    height: 900px;
    width: 900px;
    border: 2px solid black;
    display: inline-block;
    margin: -1px;
    border-collapse: collapse;
}

td, tr {
    border: 2px solid black;
    height: 112.5px;
    width: 112.5px;
}

td::after {
    content: ' ';
    display: block;
    margin-top: 100%;
}

.sqr { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="chessContainer">
        <table id="board">

        </table>
    </div>
    <script src="chess.js"></script>
</body>
</html>

【问题讨论】：

我强烈建议学习 CSS 网格，使用网格布局会很容易。不需要桌子。
结构错误
如果您在尝试使用表格时遇到困难，请尝试一下*.com/questions/10348488/…
我觉得你最好学习一下 CSS 显示方法。 (flexbox-grid-block)

标签： javascript html css game-development

【解决方案1】：

您的问题出在 javascript 中，您想将列 (td) 附加到行 (tr)，然后将行附加到板上。

board.appendChild(row);这是你的问题。改成row.appendChild(column);

注意：如果您在运行时右键单击浏览器并查看表的构建方式，您将看到您正在创建一个 tr 并且行内没有任何内容，那么您有 8 个 td标签和 html 以这种方式继续。这应该是要查看的线索。

const board = document.getElementById("board");
let black = true;

for(let i = 1; i <= 8; i++){

    let row = document.createElement("tr");
   // let sqr = document.createElement("div");
    //sqr.classList.add("sqr");

    if(black){
        row.classList.add("black");
    }
    else{
        row.classList.add("black");
    }
    black = !black;
    //row.appendChild(sqr);
    board.appendChild(row);


    for(let j = 1; j <= 8; j++){

        let column = document.createElement("td");
        //let sqr2 = document.createElement("div");
        //sqr2.classList.add("sqr");


        if(black){
            row.classList.add("black");
        }
        else{
            row.classList.add("white");
        }
        black = !black;
       // column.appendChild(sqr2);
        row.appendChild(column);

    }
}

.black {
    background: black;
}

.white { 
    background: white;
}

table { 
    height: 900px;
    width: 900px;
    border: 2px solid black;
    display: inline-block;
    margin: -1px;
    border-collapse: collapse;
}

td, tr {
    border: 2px solid black;
    height: 112.5px;
    width: 112.5px;
}

td::after {
    content: ' ';
    display: block;
    margin-top: 100%;
}

.sqr { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="chessContainer">
        <table id="board">

        </table>
    </div>
    <script src="chess.js"></script>
</body>
</html>

【讨论】：