包含固定列和滚动列的表 [英] Table with fixed and scrolling columns

问题描述

我有一张桌子，我想让它的一部分固定下来，并且它的一部分可以滚动。

我期望最终与此类似的东西，除了在一张表中。

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类正常工作？

解决方案

嵌套表怎么样？您只能在< td> 内使用< div> ，所以嵌套似乎是唯一选择这里。

http://jsbin.com/ 0xAJoFaL / 1 /编辑

编辑：这不起作用，标题没有与列排队，它不解决你的问题的最后一部分 - 水平滚动几个月。

无论如何，我对此感兴趣，因此继续挖掘。如果您不介意嵌套表格，并且以可疑语义的方式进行嵌套，那么...

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

I've got a table and I'd like to make a portion of it fixed and a portion of it scrollable.

I'm looking to end up with something like this, except in a single table.

http://jsbin.com/owuva4

Here's a JSFiddle that does the scrolling, but I can't figure out how to wedge in the correct css classes to make part of the table fixed and part scrollable.

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

Here's the css so far:

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

.fixed_cols {

}

.scrollable_area {

Ideally, the area that contains the months and the totals associaed with them would be scrollable while the other, left-most three columns would be fixed.

What do I need to do get the .fixed_cols and .scrollable_area classes working correctly?

解决方案

How about nested tables? You can only use a <div> inside a <td>, so nesting seems to be the only option here.

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

EDIT: That doesn't work, titles weren't lining up with columns and it doesn't solve the last part of your question - horizontally scrolling the months.

Anyway, I got intrigued by this so continued digging. If you don't mind nesting tables, and doing so in a questionably semantic way, then...

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

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