title: w3-table the column unequal width size
body: <p>I'm using w3css with class w3-table.
  I set the width for each "td" with width 35px and height 35px.
  I found out that the width still changes according to the text.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;title&gt;W3.CSS&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"&gt;
  &lt;style&gt;
      .box{
          width: 35px;
          height: 35px;
          border: 1px solid black;
      }
  
      .yellow {
          background-color: yellow !important;
      }
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;table class="w3-table"&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td class="box yellow"&gt;20&lt;/td&gt;
           &lt;td class="box yellow"&gt;1000&lt;/td&gt;
           &lt;td class="box yellow"&gt;2&lt;/td&gt;
           &lt;td class="box yellow"&gt;10&lt;/td&gt;
           &lt;td class="box yellow"&gt;1000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td class="box yellow"&gt;&amp;nbsp;&lt;/td&gt;
           &lt;td class="box yellow"&gt;&amp;nbsp;&lt;/td&gt;
           &lt;td class="box yellow"&gt;&amp;nbsp;&lt;/td&gt;
           &lt;td class="box yellow"&gt;&amp;nbsp;&lt;/td&gt;
           &lt;td class="box yellow"&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>Whereby I attach the result output as below:</p>
  
  <p><a href="https://i.stack.imgur.com/9Dw37.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Dw37.png" alt="Output Result"></a></p>
  
  <p>There have A, B, C, D, E column labelled for easy me to explain.
  A with text 20
  B with text 1000
  C with text 2
  D with text 10
  E with text 1000</p>
  
  <p>A and D column have two digit text ie 20 and 10 respectively.
  I expected A and D have the same width but the output result showed A width slightly bigger than D. I can conclude that the first column always slight bigger compare to other columns.
  I also notice that the column width change according to the number of text.
  Example 1000 in column B and E width bigger 2 in column C. </p>
  
  <p>May I know how to make sure the column width able to maintain a fixed size ratio in each column while being able to maintain a responsive web page?</p>
  
  <p>I appreciate if you can give me some hints on this.</p>