HTML table tbody column widths not matching thead column widths after adding scrollbar using display: block

Question

I've been attempting to add a scrollbar to my tbody so that my thead sticks to the top. The scrollbar works, and my thead looks how I want it to, but the problem is that my tbody columns aren't "lining up" with the column widths being set in my thead anymore. My thead column widths are "auto-fitting" to the contents, and I want my tbody widths to match whatever is being set in the thead.

Removing "display: block" fixes this issue of course, but gets rid of my scrollbar, so I'm stuck. I've also tried adding 100% width to my tbody, as well as adding 100% width and display: block to my thead - These didn't change anything.

Please see my edit at the bottom for another thing I've tried

How do I add a scrollbar to my tbody without messing up my column widths?

<table id="CmtRequests" class="table-condensed table-bordered table-striped table-responsive" cellspacing="0">
    @* Header *@
    <thead>
        @* Filters row *@
        <tr>
            <th>
                <a asp-page="./Index" class="btn btn-sm btn-dark">Reset</a>
                <input formmethod="get" type="submit" value="Refresh" class="btn btn-sm btn-primary" />
            </th>
            <th>
                <select class="form-control" asp-for="SupplierFilter" asp-items="Model.SupplierList"><option selected></option></select>
            </th>
            <th>
                <select class="form-control" asp-for="ReasonFilter" asp-items="Model.ReasonList"><option selected></option></select>
            </th>
            @*etc..*@
        </tr>
        @* Title row *@
        <tr>
            <th>
                Title
            </th>
            <th>
                Title
            </th>
            <th>
                Title
            </th>
            @*etc..*@
        </tr>
    </thead>
    @* Body *@
    <tbody style="overflow-y:scroll; overflow-x:hidden; height:38vh; display:block;">
        @foreach (var item in Model.CmtRequests)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.PartNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SupplierNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Priority)
                </td>
                @*etc..*@
            </tr>
        }
    </tbody>
</table>

EDIT: I tried adding the following CSS class table-fixed, getting rid of all the style settings in my HTML above, and using it instead (from this article) and the scrollbar isn't appearing, so something else bigger must be going on:

.table-fixed tbody {
    height: 38vh;
    overflow-y: auto;
    width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

    .table-fixed tr:after {
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
    }

    .table-fixed tbody td,
    .table-fixed thead > tr > th {
        float: left;
    }

Answer 1

This works:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <div class="container">
      <div class="row">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4>
                Fixed Header Scrolling Table 
              </h4>
            </div>
            <table class="table table-fixed">
              <thead>
                <tr>
                  <th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
                </tr>
                <tr>
                  <td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
                </tr>
                <tr>
                  <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
                </tr>
                <tr>
                  <td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
                </tr>
                <tr>
                  <td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
                </tr>
                <tr>
                  <td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
                </tr>
                <tr>
                  <td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td>
                </tr>
                <tr>
                  <td class="col-xs-2">8</td><td class="col-xs-8">Bob Skelly</td><td class="col-xs-2">96</td>
                </tr>
                <tr>
                  <td class="col-xs-2">9</td><td class="col-xs-8">William Defoe</td><td class="col-xs-2">13</td>
                </tr>
                <tr>
                  <td class="col-xs-2">10</td><td class="col-xs-8">Will Tripp</td><td class="col-xs-2">16</td>
                </tr>
                <tr>
                  <td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td>
                </tr>
                <tr>
                  <td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td>
                </tr>
              </tbody>
            </table>
          </div>
      </div>
    </div>

CSS: ==> width: 97%; does the trick

.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
  height: 230px;
  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 thead > tr> th {
  float: left;
  border-bottom-width: 0;
}