title: Table header and table cell display different width
body: <p>I need to separate table and into headers and rows to be able to control scrolling. But now column width for headers and cells appear to be different. I'm trying to eliminate all padding and border on span element. In this example column header appears as 131px. In my other case, cell width comes as 129px (less than defined width 130px) and I'm not able to figure it out.</p>
  
  <pre><code>&lt;table style="border-collapse: collapse;"&gt;
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th style="width: 130px; padding:0px; border:1px solid;"&gt;Column1&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  &lt;table formArrayName="scheduleDetail" style="border-collapse: collapse;"&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td style="width: 130px;  padding:0px; border:1px solid; box-sizing: border-box;"&gt;
        &lt;span style="width: 130px;  padding:0px; border:0px;"&gt;
          &lt;a href="javascript:" style="text-decoration: underline; color: blue"&gt;1111&lt;/a&gt;
        &lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>