Удаление белых линий в табличном элементе

Я написал код 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, это было бы так легко сделать с помощью сетки. Нет необходимости в столе.

— 19.12.2020 04:11

структура неправильная

— 19.12.2020 04:24

Если вы застряли, пытаясь использовать таблицы, попробуйте stackoverflow.com/questions/10348488/…

— 19.12.2020 04:51

Я думаю, вам лучше изучить методы отображения CSS. (flexbox-сетка-блок)

— 19.12.2020 10:32

javascript html css game-development

19.12.2020 04:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

19.12.2020 04:42

Другие вопросы по теме

Javascript с использованием getElementByClassName для изменения цвета кнопки

Ошибка при размещении html-файла на github

Активная панель навигации на странице ASP.NET

Я должен помещать теги для цвета и шрифта фрагмента текста в одну и ту же скобку <h1>скобки</h1> или в отдельные?

Список файлов, отправка новых файлов изображений, доступ/удаление по индексу

Угловая маршрутизация с несколькими макетами не работает

Установка фокуса на веб-страницу в стиле IE PDF для очистки с помощью Excel VBA

Замените строчные буквы в href на прописные

Ошибка при передаче входного значения на следующую страницу

Flex-направление: обратный столбец скрывает компонент навигации

Удаление белых линий в табличном элементе

Ответы 1

Другие вопросы по теме

Похожие вопросы