title: Bootstrap table cells are not aligned
body: <p>I have added my code snippet, facing issue with fixed header table</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table-fixed tbody {
      height: 300px;
      overflow-y: auto;
      width: 100%;
    }
  
    .table-fixed thead,
    .table-fixed tbody,
    .table-fixed tr,
    .table-fixed td,
    .table-fixed th {
      display: block;
    }
  
    .table-fixed tbody td,
    .table-fixed tbody th,
    .table-fixed thead&gt;tr&gt;th {
      float: left;
      position: ative;
  
      &amp;::after {
        content: '';
        clear: both;
        display: block;
      }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="col-xs-5 col-sm-6 col-lg-8 rounded shadow"&gt;
          &lt;div class="table-responsive"&gt;
            &lt;table class="table table-fixed"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th scope="col" class="col-3"&gt;#&lt;/th&gt;
                  &lt;th scope="col" class="col-3"&gt;First&lt;/th&gt;
                  &lt;th scope="col" class="col-3"&gt;Last&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;th scope="row" class="col-3"&gt;1&lt;/th&gt;
                  &lt;td class="col-3"&gt;Mark&lt;/td&gt;
                  &lt;td class="col-3"&gt;Otto&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;th scope="row" class="col-3"&gt;2&lt;/th&gt;
                  &lt;td class="col-3"&gt;Jacob&lt;/td&gt;
                  &lt;td class="col-3"&gt;Thornton&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;&lt;!-- End --&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And the result:</p>
  <p><a href="https://i.stack.imgur.com/GbbzY.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>As you can see, table rows are not aligning properly. There are 3 header cells and 3 cells in each row. However, when I add one more cell (4 header cells, 4 cells in each row) in the header and in two body rows, everything works okay. I got this code from the Web (<a href="https://bootstrapious.com/p/bootstrap-table-with-a-fixed-header" rel="nofollow noreferrer">https://bootstrapious.com/p/bootstrap-table-with-a-fixed-header</a>) and don't know what is wrong here.</p>