具有固定头和固定列的表在纯css上 [英] Table with fixed header and fixed column on pure css

问题描述

我需要创建一个具有固定标题和固定第一列的html表（或类似的外观）。

I need to create a html table (or something similar looking) with a fixed header and a fixed first column.

我所见过的每个解决方案都使用javascript或jQuery来设置scrollTop / scrollLeft，但它不能在移动浏览器上顺利工作，所以我在寻找一个纯CSS解决方案。

Every solution I've seen so far uses javascript or jQuery to set scrollTop/scrollLeft, but it doesn't work smoothly on mobile browsers, so I'm looking for a pure CSS solution.

我在这里找到一个固定列的解决方案：jsfiddle.net/C8Dtf/20/但我不知道如何可以增强它

I found a solution for a fixed column here: jsfiddle.net/C8Dtf/20/ but I don't know how I can enhance it to make the header fixed too.

我希望它能在webkit浏览器上使用或使用一些CSS3功能，但我重复一遍，我不想使用javascript来滚动。

I want it to work on webkit browsers or use some CSS3 features, but I repeat, I don't want to use javascript for scrolling.

EDIT：这是我要实现的行为示例： http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

This is example of the behaviour I want to achieve: http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

推荐答案

这不是一件容易的壮举。

This is no easy feat.

：

链接根据lanoxx的评论更新

http://jsfiddle.net/C8Dtf/366/

只是请记住添加以下内容：

Just remember to add these:

<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>

我没有看到任何其他方式实现。 尤其不是仅使用css。

i don't see any other way of achieving this. Especially not by using css only.

这是很多事情。希望这有助于：）

This is a lot to go through. Hope this helps :)

这篇关于具有固定头和固定列的表在纯css上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！