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。

对于良好的编程实践，您不应该以数字

开头命名变量，名称等

CSS / HTML - 列宽格式

1 个答案: