2015-01-09 130 views
-1

我有以下的HTML代碼:如何讓CSS影響CSS解釋後生成的DOM元素?

<!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元素?

+0

爲什麼downvote? – 2015-01-09 21:08:36

+0

可能是因爲您可能在10秒內在Google上找到了解決方案,因此沒有顯示研究成果。 – AlienWebguy 2015-01-09 21:09:15

回答

1

你的代碼沒有問題。你正在桌子周圍放置一個邊框。您可能需要在您的td上加入邊框樣式規則,以達到您想要的效果。

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

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

我明白了,謝謝。爲什麼我需要'border-collapse?' – 2015-01-09 21:13:27

+0

因此,您的單元格和表格邊緣等沒有並列邊框。 – AlienWebguy 2015-01-09 21:14:25

3

您需要更改td樣式。

#myTable { 
    table-layout: fixed; 
} 

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

您的css按照正確的順序正確應用。如前所述,你要在你的css文件的桌面上調用一個邊框。