相关疑难解决方法(0)

具有固定标头的仅CSS可滚动表

我有一个解决方案,我可以通过使用次要的jQuery和CSS创建可固定页眉/页脚的可滚动表 - 但我正在寻找一种方法,使这个跨CSS浏览器兼容的CSS解决方案.

需要明确的是,我所寻求要做的就是使用只有一个table标签(和它是有效的子标签,colgroup,col,thead,tbody,tfoot,tr,th,td),而是采用了一套将符合下列条件的CSS规则:

  1. 必须保持页眉/页脚/内容行之间的列对齐
  2. 当内容垂直滚动时,必须允许页眉/页脚保持固定
  3. 不得要求任何jQuery或其他JavaScript以提供功能
  4. 只能使用上面提供的标签

这个代码示例:http://jsfiddle.net/TroyAlford/SNKfd/显示了我当前的方法.大多数JS只是用随机值填充表,但最后一部分是驱动左/右可滚动性的因素.

$tbody.bind('scroll', function(ev) {
    var $css = { 'left': -ev.target.scrollLeft };
    $thead.css($css);
    $tfoot.css($css);
});
Run Code Online (Sandbox Code Playgroud)

注意:提供的示例在IE中无法正确呈现,并且需要jQuery来提供水平滚动.无论如何我不关心水平滚动,所以如果解决方案不这样做就没问题.

html css internet-explorer css3

61
推荐指数
5
解决办法
15万
查看次数

标签 统计

css ×1

css3 ×1

html ×1

internet-explorer ×1