Таблица Javascript не отображается с помощью CSS

Я создал таблицу с помощью JavaScript, но она не отображается с помощью моего CSS. так как я могу заставить это работать? на самом деле мне нужна дополнительная помощь, моя идея состоит в том, чтобы создать экран с одной кнопкой, и после того, как вы нажмете на него, должно появиться меню, представляющее собой таблицу из одного столбца, начинающегося в верхней части экрана и заканчивающегося в конце экрана., таблица будет прокручиваться, и в каждой строке будет текст (текст url) без строки url под текстом, поэтому при нажатии на нее открывается страница на всем экране позади таблицы и кнопки. кнопка должна всегда показываться (но она исчезает, когда я нажимаю на нее). файл main.js

     function makeTableHTML() {
    var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");

    var myArray = [ [ "Name, http://www.google.com" ],
            [ "Name, http://www.google.com" ] ];
    var result = '<table width = "300">';
    for (var i = 0; i < myArray.length; i++) {
        result += "<tr><td>";
        if (i < 10) {
            result += "0" + i + "  ";
        } else {
            result += i + "  ";
        }

        result += '<a href="' + myArray[i][0] + '">';

        result += myArray[i][1] + "</a>";

        result += "<td></tr>";

    }
    result += "</table>";
    document.write(result);
    document.getElementById("channelsmenu").classList.toggle(result);
}

function hideTableHTML() {
    var x = document.getElementById('channelsmenu');
    x.style.display = 'none';
}

и мой HTML

    <!DOCTYPE html>
<html>
<head>

<title>5Star-IPTV</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/main.js"></script>
</head>

<body>

    <div>
        <table>
            <tr>
                <td>
                    <div id="channelsmenu" class="dropdown-content"></div>

                </td>
                <td class="buttons-col"><input type="image"
                    src="channels-menu.png" class="buttons" alt="channels menue"
                    onMouseOver="this.src='channels-menu-1.png'"
                    onMouseOut="this.src='channels-menu.png'" onclick="makeTableHTML()" /></td>
                <td class="buttons-col"><input type="image"
                    src="return-button.png" alt="return button" class="buttons"
                    onMouseOver="this.src='return-button-1.png'"
                    onMouseOut="this.src='return-button.png'" onclick="hideTableHTML()" /></td>
            </tr>
        </table>
    </div>
</body>
</html>

и это CSS

table {
    width: 100%;
    border: 1px solid black;
    background-color: #808080;
}

tr {
    width: 100%;
    align: right;
}

th, td {
    text-align: right;
}       background-color: #808080;
}

.buttons-col {
    text-align: center;
    width: 90px;
    padding-top: 5px;
}
Источник

1 ответ

В HTML вы открываете "th" и закрываете его как "tr". Во-вторых, пожалуйста, научитесь правильно писать / форматировать ваш код - вам будет легче читать ваш код и помогать вам.

Кроме того, используйте тег