title: Different table column width in Chrome and Firefox
body: <pre><code>&lt;table class="schedule"&gt;
     &lt;thead&gt;
       &lt;tr&gt;
         &lt;th id="first-column"&gt;#&lt;/th&gt;
         &lt;th&gt;Monday&lt;/th&gt;
         &lt;th&gt;Tuesday&lt;/th&gt;
         &lt;th&gt;Wednesday&lt;/th&gt;
         &lt;th&gt;Thursday&lt;/th&gt;
         &lt;th&gt;Friday&lt;/th&gt;
         &lt;th&gt;Saturday&lt;/th&gt;
       &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>table.schedule { 
    table-layout: fixed;
    width: 900;
  }
  
  #first-column {
    width: 200px;
    padding: 0 10px;
  }
  </code></pre>
  
  <p>cause the first column has 200+10+10=220px width in Firefox, but 180+10+10=200px in Chrome and Safari. I think the <code>width</code> shouldn't include <code>padding</code>, so Firefox is right? But anyway, how can I set the same column width across browsers?</p>
  
  <p><strong>Edit:</strong> the Chrome Developer Tools look like:
  <img src="https://i.stack.imgur.com/imUAB.png" alt="enter image description here"></p>