修复了 webgrid、asp.net mvc3 razor 的标头

Question

我的项目中有一个面板，其中有一个 webgrid。面板有一个最大化功能，所以我将 webgrid 的宽度和高度设置为 100%，因为它的宽度和高度各不相同。我在 webgrid 中显示 20 行并且滚动看起来很好......现在我的要求是我的标题应该是固定的，并且用户可以滚动内容......我已经参考了各种博客。在一些博客中，我们必须为“th”和“td”元素提供固定宽度，但在我的场景中这是不可能的（因为我已经以 % 的方式给出了宽度）。例如

  grid.Column("EquipmentManfacturer", header: "Warranty Provider", style: "column5"),

 <style type="text/css">

.column5
 {
     width: 25%;
 }

</style>

在其他一些博客中，他们给出了“th”元素的css样式作为“display：block”但这并不能解决我的问题。谁能帮我找到解决办法..

Answer 1

只需要将表头设置为固定位置，限制表的高度并将溢出设置为“滚动”。为此，请将以下 CSS 添加到您的页面：

table { display: inline-block; height: 200px; overflow-y: scroll; }
thead { position: fixed; margin-top: -30px; }

需要进行一些调整才能使布局正确。