具有固定和滚动列的表

时间:2013-11-20 02:58:39

标签: html css css-tables

我有一张桌子,我想把它的一部分修好,一部分可以滚动。

我希望最终得到类似的东西,除了在一张桌子上。

http://jsbin.com/owuva4

这是一个用于滚动的JSFiddle,但是我无法弄清楚如何在正确的css类中进行楔入以使表的一部分固定并且部分可滚动。

http://jsfiddle.net/bnd5k/J9QV7/6/

到目前为止,这是css:

#big_table {
  width:200px;
  overflow-x: scroll;
}

.fixed_cols {

}

.scrollable_area {

理想情况下,包含月份的区域和与其关联的总数将可滚动,而其他最左边的三列将被修复。

我需要做什么才能让.fixed_cols和.scrollable_area类正常工作?

1 个答案:

答案 0 :(得分:1)

嵌套表怎么样?您只能在<div>内使用<td>,因此嵌套似乎是此处的唯一选项。

http://jsbin.com/OxAJoFaL/1/edit

编辑:这不起作用,标题没有排列列,它不能解决问题的最后部分 - 横向滚动月份。

无论如何,我对这种持续的挖掘感到好奇。如果你不介意嵌套表,并以可疑的语义方式这样做,那么...

http://jsbin.com/OxAJoFaL/3/edit