Question

我有以下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元素？

Answer 1

您需要更改td样式。

#myTable {
    table-layout: fixed;
}

#myTable, #myTable td{
    border: solid 1px;
}

Answer 2

您的代码没有任何问题。你在桌子周围放了一个边框。您可能希望在td上添加边框样式规则以获得所需的结果。

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

#myTable td {
    border : 1px solid black;
}

Answer 3

您的css正确且按正确顺序应用。正如已经指出的那样，你在css文件中要求在桌面上设置边框。

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

3 个答案: