CSS/HTML - 列寬格式化

Question

我有兩段代碼。我期待這些有相同的結果，但沒有運氣。誰可以給我解釋一下這個？

<table border=1px> 
    <tr> 
    <td width=20%>test1</td> 
    <td width=80%>test2</td> 
    </tr> 
</table> 
<style> 
    table { width:100%;} 
    td.1 { width:20%; } 
    td.2 { width:80%; } 
</style> 

這可以像我期望的那樣工作。第一列是20％，第二列是80％。

<table border=1px> 
    <tr> 
    <td class="1">test1</td> 
    <td class="2">test2</td> 
    </tr> 
</table> 
<style> 
    table { width:100%;} 
    td.1 { width:20%; } 
    td.2 { width:80%; } 
</style> 

此版本顯示列爲50/50。

Answer 1

將數字1和2更改爲更合適的名稱。 CSS名稱不能以數字開頭。

<table border=1px> 
    <tr> 
    <td class="twenty-percent-width">test1</td> 
    <td class="eighty-percent-width">test2</td> 
    </tr> 
</table> 
<style> 
    table { width:100%;} 
    td.twenty-percent-width { width:20%; } 
    td.eighty-percent-width { width:80%; } 
</style> 

瞭解更多here。

而對於良好的編程實踐，你不應該命名變量，名稱等，以數字開頭