Класс таблицы (созданный с помощью createElement) не работает правильно в этом коде - PullRequest
Новая
       1

Класс таблицы (созданный с помощью createElement) не работает правильно в этом коде

0 голосов
/ 17 апреля 2020

Я создал таблицу с document.createElement ('table') и класс с table.className, но когда я запускаю код, некоторые свойства (такие как border-color и border-collapse) не работают. Я не знаю, почему это происходит.

Я пытаюсь выяснить, идет ли это от свойств, типа атрибута className, или чего-то еще. Я действительно понятия не имею. 

<!DOCTYPE html>

<html>

<head>
    <title>Ejemplo aprenderaprogramar.com</title>
    <meta charset="utf-8">
    <style type="text/css">
        h1 {
            margin-top: 100px;
            text-align: center;
            color: mediumturquoise;
        }

        #div1 {
            width: 400px;
            height: 400px;
            border: solid 1px gray;
            border-radius: 7px;
            margin: 100px auto;
        }

        .tabla{
            width: 300px;
            height: 200px;
            margin: 50px auto;
            border-style: solid  ;
            border-width: 1px;
            border-color:black ;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            border-collapse: collapse;

        }


    </style>
      <script type="text/javascript">
        window.onload = function () {


            var body = document.getElementsByTagName("body")[0];
            var table = document.createElement("table");
            body.appendChild(table);
            table.className="tabla";

         }

    </script>
</head>

<body>
    <h1>Calendar</h1>

    <div id="div1">

    </div>

</body>

</html>

1 Ответ

0 голосов
/ 17 апреля 2020

Внутри вашего CSS кода для .tabla, border-collapse и border-color отменяют друг друга. Может быть, поэтому он не отображается на веб-странице. 

.tabla {
    border-color:black ;
    border-collapse: collapse;
}
...