删除 table 元素中的白线

Question

我写了一个 js 代码来制作 table 以及 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>

Answer 1

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

board.appendChild(row);这是你的问题。将其更改为 row.appendChild(column);

注意：如果您在运行时右键单击浏览器并查看 table 的构建方式，您将看到您正在创建一个 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>

删除 table 元素中的白线

Removing white lines in table element

html

javascript

css

game-development