html - 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 .

为了良好的编程习惯，您永远不应该以数字开头命名变量、名称等