相关疑难解决方法(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万
查看次数

如何将滚动条添加到HTML5表?

我有一个HTML5表,我想添加一个滚动条.我希望表格显示十行,然后用户可以向下滚动以查看其他歌曲.如何添加滚动条?

这是我在HTML5中的表的代码:

<table id="my_table" table border="5">
  <tr>
    <th>URL</th>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

这是我的CSS代码:

#my_table {
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width: 500px;
    text-align: center;
}
Run Code Online (Sandbox Code Playgroud)

css html5

44
推荐指数
4
解决办法
12万
查看次数

标签 统计

css ×2

css3 ×1

html ×1

html5 ×1

internet-explorer ×1