如何为引导表创建固定列标题

Question

我正在尝试使我的引导程序表的列标题固定，以便在滚动表的数据项时，列标题不会移动。

jsfiddle示例

我已尝试过下面的CSS，但是，它并没有修复标题，进一步扰乱了表格的整体外观和感觉：

.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;
}