0

I have two pieces of code. I was expecting these to have the same result, but no luck. Can someone explain this to me?

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

This works as I expect. The first column is 20%, the second is 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>

This version shows column as 50/50.

Jason
  • 1,787
  • 4
  • 29
  • 46

1 Answers1

3

Change the numbers 1 and 2 to more appropriate names. CSS names cannot begin with numbers.

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

Read more here.

And for good programming practices you should never name variables, names, etc starting with a number

Community
  • 1
  • 1
simeg
  • 1,889
  • 2
  • 26
  • 34