Por que o border-collapse nao está funcionando na tabela?

HTML

CSS

JavaScript

HTML5

CSS3

08/03/2020

<html>

<head>
    <style>
        table {
            font-family: arial;
            width: 400px;
            margin: auto;
            border-collapse: collapse;
            border: 1px solid #000;
            display: table;
        }

        .indice {
            background: burlywood;
        }
    </style>
</head>

<body>
    <div id="tab"></div>

    <script>
        let tabela = "<table><tr><th>Nome</th><th>Indice</th></tr>";
        var i = 0;
        while (true) {
            nome = prompt("Digite seu nome: ")
            if (nome != null) {
                tabela += "<tr><td>" + nome + "</td>" + "<td class='indice'>" + i + "</td></tr>"
                i++;
            }
            else {
                break
            }
        }
        tabela += "</table>";
        document.getElementById("tab").innerHTML = tabela;
    </script>
</body>

</html>
Wesley Lira

Wesley Lira

Curtidas 0

Respostas

Stella Oliveira

Stella Oliveira

08/03/2020

<html>
    <head>
    </head>

    <body>
        <style>
            table {
                font-family: arial;
                width: 400px;
                margin: auto;
                display: table;
            }

            table,
            tr,
            th,
            td {
                border-collapse: collapse;
                border: 2px solid #000;
            }

            .indice {
                background: burlywood;
            }
        </style>
        <div id="tab"></div>

        <script>
            let tabela = "<table><tr><th>Nome</th><th>Indice</th></tr>";
            var i = 0;
            while (true) {
                nome = prompt("Digite seu nome: ");
                if (nome != null) {
                    tabela +=
                        "<tr><td>" +
                        nome +
                        "</td>" +
                        "<td class='indice'>" +
                        i +
                        "</td></tr>";
                    i++;
                } else {
                    break;
                }
            }
            tabela += "</table>";
            document.getElementById("tab").innerHTML = tabela;
        </script>
    </body>
</html>


Você está colocando espaço antes da propriedade do CSS, o que está fazendo com o que o interpretador passe pra ASCII fazendo com que os caracteres sejam inseridos antes da propriedades, fazendo com que o navegador não entenda.
GOSTEI 0
POSTAR