title: HTML css Table misaligned Columns
body: <p>I tried to create a table in AngularJS with sticky header and footer. I've managed to do that; here's a <a href="https://plnkr.co/edit/NJenZui4atfdbdrjYz5S?p=preview"><strong>Plunker demo</strong></a> and code:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl as ctrl"&gt;
      &lt;table class="table table-bordered table-hover"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      Column1
                  &lt;/th&gt;
                  &lt;th&gt;
                      Column2
                  &lt;/th&gt;
                  &lt;th&gt;
                      Column3
                  &lt;/th&gt;
                  &lt;th&gt;
                      Column4
                  &lt;/th&gt;
                  &lt;th&gt;
                      Column5
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr class="info" ng-repeat="item in items"&gt;
                &lt;td&gt;
                  {{item.name}}
                &lt;/td&gt;
                &lt;td&gt;
                    {{item.type}}
                &lt;/td&gt;
                &lt;td&gt;
                    {{item.value}}
                &lt;/td&gt;
                &lt;td&gt;
                    {{item.code}}
                &lt;/td&gt;
                &lt;td&gt;
                    {{item.id}}
                &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      Column1
                  &lt;/th&gt;
                  &lt;th&gt;
                      Column2
                  &lt;/th&gt;
                  &lt;th&gt;
                      Column3
                  &lt;/th&gt;
                  &lt;th&gt;
                      Column4
                  &lt;/th&gt;
                  &lt;th&gt;
                      Column5
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>But the only problems are:</p>
  
  <ol>
  <li>The column width isn't dynamic, as you can see, in the first row the data overflows into the 2nd column.</li>
  <li>The columns are misaligned.</li>
  </ol>
  
  <p>Any idea how to fix this?</p>