jquery - 带有固定标题和第一列的 Twitter Bootstrap 表

Question

我有下表，第一列是固定的。

JSFiddle:

https://jsfiddle.net/f7v2xaph/

<iframe width="100%" height="300" src="//jsfiddle.net/f7v2xaph/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

请问，如何更新代码来获得固定的标题？

我试过这个解决方案

Scrollable table with fixed header in bootstrap

但是没有幸运地使用固定的第一列。

非常感谢您的任何建议。

Answer 1

如果可以在 CSS 中使用，请避免使用 Javascript:

.table-responsive thead {
   position: fixed;
}

另外，如果你不想让你的头盖住你的 body ，你需要做一个小技巧:

.table-responsive {
    margin-top: 40px; // height of your thead tr
}

.table-responsive thead {
    position: fixed;
    top: 0;
}

修复 thead 的第二个问题是你的 thead 的单元格宽度与你的 tbody 的单元格宽度不匹配......你必须使用 width 属性修复它，每个单元格。