Bootstrap table cells are not aligned

Question

I have added my code snippet, facing issue with fixed header table

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>tr>th {
    float: left;
    position: ative;

    &::after {
      content: '';
      clear: both;
      display: block;
    }
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-5 col-sm-6 col-lg-8 rounded shadow">
        <div class="table-responsive">
          <table class="table table-fixed">
            <thead>
              <tr>
                <th scope="col" class="col-3">#</th>
                <th scope="col" class="col-3">First</th>
                <th scope="col" class="col-3">Last</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row" class="col-3">1</th>
                <td class="col-3">Mark</td>
                <td class="col-3">Otto</td>
              </tr>
              <tr>
                <th scope="row" class="col-3">2</th>
                <td class="col-3">Jacob</td>
                <td class="col-3">Thornton</td>
              </tr>
            </tbody>
          </table>
        </div><!-- End -->
      </div>

And the result:

enter image description here

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 (https://bootstrapious.com/p/bootstrap-table-with-a-fixed-header) and don't know what is wrong here.

Answer 1

replace your th with td in the body like this:

<div class="col-xs-5 col-sm-6 col-lg-8 rounded shadow">
    <div class="table-responsive">
      <table class="table table-fixed">
        <thead>
          <tr>
            <th scope="col" class="col-3">#</th>
            <th scope="col" class="col-3">First</th>
            <th scope="col" class="col-3">Last</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td scope="row" class="col-3">1</td>
            <td class="col-3">Mark</td>
            <td class="col-3">Otto</td>
          </tr>
          <tr>
            <td scope="row" class="col-3">2</td>
            <td class="col-3">Jacob</td>
            <td class="col-3">Thornton</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>