包含固定列和滚动列的表 [英] Table with fixed and scrolling columns
问题描述
我有一张桌子,我想让它的一部分固定下来,并且它的一部分可以滚动。
我期望最终与此类似的东西,除了在一张表中。
下面是一个可以滚动的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.
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屋!