如何让 CSS 影响解释 CSS 后生成的 DOM 元素



>我有以下HTML代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title></title>
</head>
<body>
    <table id="myTable">
    </table>
<script src="jquery-1.11.2.js"></script>
<script src="logic.js"></script>
</body>
</html>

而这个CSS代码:

#myTable {
    table-layout: fixed;
    border: solid 1px;
}

如您所见,该文档有一个空表。该表的内容(行和列)由 JavaScript 代码生成,链接在文档末尾。

当我打开文档时,CSS 中描述的边框出现在表格周围,但不出现在生成的单元格之间。

我认为这样做的原因是因为CSS链接到文档的开头,在<head>中,而生成行和列的JavaScript代码在文档的末尾运行。

(认为)我了解此问题的原因,但我不确定如何解决此问题。如何使 CSS 应用于文档后面生成的 DOM 元素?

您需要

更改td样式。

#myTable {
    table-layout: fixed;
}
#myTable, #myTable td{
    border: solid 1px;
}

你的代码没有任何问题。你在桌子周围放了一个边框。您可能希望在td中包含边框样式规则,以实现所需的结果。

#myTable {
    table-layout    : fixed;
    border          : 1px solid black;
    border-collapse : collapse; /* Add this */
}
#myTable td {
    border : 1px solid black;
}

您的 css 正在正确应用且顺序正确。如前所述,您在 css 文件中的表格上调用边框。

最新更新