标题固定的可滚动表-表标题和内容的对齐问题

Question

我想使表在固定标题的情况下可滚动。我尝试了不同的方法，但无法获得完美的解决方案。 下面的代码显示表标题已用可滚动表固定，但表标题与主体的对齐方式不正确。

function CreateTableFromJSON() {
  var myBooks = [{
      "Book ID": "1",
      "Book Name": "Computer Architecture",
      "Category": "Computers",
      "Price": "125.60",
      "Status": "Pass"
    },
    {
      "Book ID": "2",
      "Book Name": "Asp.Net 4 Blue Book",
      "Category": "Programming",
      "Price": "56.00",
      "Status": "Fail"
    },
    {
      "Book ID": "3",
      "Book Name": "Popular Science",
      "Category": "Science",
      "Price": "210.40",
      "Status": "Pass"
    },
    {
      "Book ID": "4",
      "Book Name": "CA",
      "Category": "Math",
      "Price": "1252.60",
      "Status": "Pass"
    },
    {
      "Book ID": "5",
      "Book Name": "Asp.Net",
      "Category": "Programming",
      "Price": "126.00",
      "Status": "Fail"
    },
    {
      "Book ID": "6",
      "Book Name": "Popular Science",
      "Category": "Science",
      "Price": "210.40",
      "Status": "Pass"
    },
    {
      "Book ID": "7",
      "Book Name": "Agile",
      "Category": "standards",
      "Price": "115.60",
      "Status": "Fail"
    },
    {
      "Book ID": "8",
      "Book Name": "SAP",
      "Category": "Programming",
      "Price": "156.00",
      "Status": "Fail"
    },
    {
      "Book ID": "9",
      "Book Name": "General",
      "Category": "general",
      "Price": "110.40",
      "Status": "Pass"
    }
  ]

  // EXTRACT VALUE FOR HTML HEADER. 
  // ('Book ID', 'Book Name', 'Category' and 'Price')
  var col = [];
  for (var i = 0; i < myBooks.length; i++) {
    for (var key in myBooks[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }
  var table = document.getElementById("resulttable");
  var tbody = document.getElementById("resulttable_body");
  var tr = tbody.insertRow(0);

  // ADD JSON DATA TO THE TABLE AS ROWS.
  for (var i = 0; i < myBooks.length; i++) {

    tr = tbody.insertRow(-1);

    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      tabCell.innerHTML = myBooks[i][col[j]];
    }
  }

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.


}



$(document).ready(function() {

  var sortOrder = 1; // flag to toggle the sorting order
  function getVal(elm, colIndex) {
    var td = $(elm).children('td').eq(colIndex).text();
    if (typeof td !== "undefined") {
      var v = td.toUpperCase();
      if ($.isNumeric(v)) {
        v = parseInt(v, 10);
      }
      return v;
    }
  }

  $(document).on('click', '.sortable', function() {
    var self = $(this);
    var colIndex = self.prevAll().length;
    var o = (sortOrder == 1) ? 'asc' : 'desc'; // you can use for css to show sort direction
    sortOrder *= -1; // toggle the sorting order

    $('.sortable').removeClass('asc').removeClass('desc');
    self.addClass(o);

    var tbody = self.closest("table").find("tbody");
    var tr = tbody.children("tr"); //.get();

    tr.sort(function(a, b) {
      var A = getVal(a, colIndex);
      var B = getVal(b, colIndex);

      if (A < B) {
        return -1 * sortOrder;
      }
      if (A > B) {
        return 1 * sortOrder;
      }
      return 0;
    });

    $.each(tr, function(index, row) {
      //console.dir(row)
      tbody.append(row);
    });

  });

});

CreateTableFromJSON();

th,
td,
p,
input {
  font: 14px Verdana;
}

table,
th,
td {
  border: solid 1px #DDD;
  border-collapse: collapse;
  padding: 2px 3px;
  text-align: center;
}

th {
  font-weight: bold;
}

.scrollable {
  width: 300px;
  height: 100px;
  overflow: auto;
}

.fixed_header {
  width: 400px;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed_header tbody {
  display: block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
  display: block;
}

.fixed_header thead {
  background: black;
  color: #fff;
}

.fixed_header th,
.fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="fixed_header" id="resulttable" name="resulttable">
  <thead>
    <tr>
      <th name="bookID" class="sortable"> Book ID</th>
      <th name="bookName" class="sortable"> Book Name</th>
      <th name="category" class="sortable"> Category</th>
      <th name="price" class="sortable"> Price</th>
      <th name="status" class="sortable"> Price</th>
    </tr>
  </thead>

  <tbody id="resulttable_body">
  </tbody>
</table>

（jsfiddle）

在上面的示例中，我想使表主体具有固定的标题可滚动，但最终出现对齐问题（表标题列与表主体未对齐）。任何输入都会有帮助。TIA。