在窗口可调节的桌子上寻找固定的标头

我试过看了整个地方，找不到解决问题的好办法。 我期待创建一个具有固定标题的表，在滚动表的其余部分时保留。 问题是我还希望它能够在页面窗口调整时对齐。 我已经能够获得固定的标题，并且能够在调整窗口时使列对齐，但是无法使两者一起工作。 有没有可以做到这一点的脚本？ 我尝试过固定的jquery，flexigrid，固定标头咖啡，chromatable和floatyhead。 这些都没有能够给我我想要的解决方案。 也许我做错了但我有一个使用theader，tbody等的传统表。我想避免将表分成两个表，因为它们似乎从未正确排列，但如果这是唯一的解决方案，我会接受。

请帮忙！

Answer 1

试试这个答案，它适用于IE8，Firefox和Chrome ..

样式

.Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; } .BigTable { width: 100%; } .BigTable td { width: 40%; } .BigTable td + td { width: 30%; } .BigTable td + td + td { width: 30%; } .Header { margin-left: 200px; height: 30px; background-color: blue; } .Header .Heading { width: 40%; float: left; height: 30px; } .Header .Heading + .Heading { width: 30%; } .Header .Heading + .Heading + .Heading { width: 30%; } 

表

 
 
Heading 1
 
Heading 2
 
Heading 3
 
 
 
 
 
 
Cell Content 1
 
Cell Content 2
 
Sep 16, 2007 01:54 AM
 
 
 
More Cell Content 1
 
More Cell Content 2
 
Sep 16, 2007 01:54 AM
 
 
 
Even More Cell Content 1
 
Even More Cell Content 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
  

或试试这个

 #listBevel, #listTable { position: absolute; z-index: 2; border: 1px solid #989898; top: 85px; left: 227px; right: 37px; height: 270px; min-width: 654px; } /* @group List Table Headers */ #listTableHeaders { position: absolute; z-index: 3; top: 67px; left: 39px; right: 37px; height: 500px; min-width: 654px; border: 1px solid #989898; overflow: hidden; overflow-y: scroll; } .tableHeaderShadow { background: url(/images/interface/bevel_shadow.png) repeat-x; position: fixed; height: 5px; top: 105px; right: 53px; left: 228px; min-width: 639px; } #scrollBarCoverContainer { position: fixed; z-index: 5; top: 86px; left: 228px; right: 38px; height: 0; min-width: 654px; font-size: 11px; border: 1px none #989898; text-align: right; } #scrollBarCoverUp { background: url(/images/interface/list_header_bg.png) repeat-x; width: 14px; height: 18px; border-left: 1px solid #e5e5e5; float: right; } table#entryListHeaders th img.sortArrow { float: right; } table#entryListHeaders th a { color: #000; text-decoration: none; display: block; height: 18px; } table#entryListHeaders th:hover { background-position: 0 -18px; cursor: default; } table#entryListHeaders th { background: url(/images/interface/list_header_bg.png) repeat-x; border-left: 1px solid #e5e5e5; border-right: 1px solid #a5a5a5; text-align: left; padding: 0 5px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 18px; width: 42%; font-size: 11px; line-height: 1.6em; text-shadow: #fff 0 1px 0; } table#entryListHeaders th + th { width: 32%; } table#entryListHeaders th.selectedHeader { text-shadow: #d8e6ff 0 1px 0; background-image: url(/images/interface/list_header_selected.png); border-left-color: #c2d4f2; } #listTable { background-color: #fefefe; top: 104px; height: 251px; overflow: auto; overflow-x: hidden; overflow-y: scroll; font-size: 11px; border-collapse: collapse; } table#entryList { } table#entryList td { width: 42%; } span.truncateText { display: block; height: 18px; overflow: hidden; } tbody.scrollContent td, tbody.scrollContent tr.normalRow td { border-right: 1px hidden #cbd1d8; padding: 1px 5px; height: 18px; line-height: 1.6em; margin: 0; border-left-style: hidden; border-left-width: 1px; } tbody.scrollContent tr.alternateRow { background: #eaf2ff; } tbody.scrollContent tr.selectedRow td { background: url(/images/interface/selected_row.png) repeat-x; color: #fff; border-right-style: hidden; } table#entryList td + td { width: 32%; } tbody.scrollContent tr:hover, tbody.scrollContent tr.alternateRow:hover { background-color: #d8e7ff; cursor: default; } 
 
 
 
 
 
 
 
 
Name
 
Domain
 
>Modified
 
 
 
 
 
Cell Content 1
 
Cell Content 2
 
Sep 16, 2007 01:54 AM
 
 
 
More Cell Content 1
 
More Cell Content 2
 
Sep 16, 2007 01:54 AM
 
 
 
Even More Cell Content 1
 
Even More Cell Content 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
And Repeat 1
 
And Repeat 2
 
Sep 16, 2007 01:54 AM
 
 
 
  

Answer 2

您只能使用标准的HTML / CSS。 具体来说，利用CSS中的display / overflow / height和HTML中的thead / tbody。 示例CSS：

 .scrollableTable tbody { display: block; overflow-y: auto; width: 100%; height: 50px; } .scrollableTable tr { display: block; } .scrollableTable td, .scrollableTable th { width: 50%; } 

示例HTML：

 
 
 
 
Fruit
 
Color
 
 
 
 
 
Apples
 
Red
 
 
 
Bananas
 
Yellow
 
 
 
Oranges
 
Orange
 
 
  

Answer 3

这是一个渐进增强的解决方案，应该是跨浏览器兼容的，这要归功于jQuery。

            
 
 
 
Fruit
 
Color
 
 
 
 
 
Apples
 
Red
 
 
 
Bananas
 
Yellow
 
 
 
Grapes
 
Purple
 
 
 
Limes
 
Green
 
 
 
Oranges
 
Orange
 
 
 
   

Answer 4

我修改了Nate Barr的上述答案。 在上一个答案列中，对齐将变得拥挤。

样式表

表

 
 
 
 
No
 
Fruit
 
test
 
Color
 
 
 
 
 
1
 
Apples
 
ohyoijmnpkjoijikjm;kl
 
Red
 
 
 
2
 
Bananas
 
ghjghjghj
 
Yellow
 
 
 
3
 
Oranges
 
hfkjhkjhkhjkl
 
Orange
 
 
 
4
 
fghgfmjhgjhgjhg
 
hjkhjkgk
 
fghfg
 
 
 
5
 
fghfg
 
fgjfjfd
 
gfh
 
 
 
6
 
fghfhj
 
gjdfhgkgfk
 
ghjgfk
 
 
 
7
 
jkgfk
 
hjfkgfk
 
hjlklh
 
 
 
8
 
hgjfgghjghj
 
fgjkjhljk
 
hjkj
 
 
 
9
 
jhkjkf
 
fgjghj
 
gkhkfjghhgjgh
 
 
 
10
 
fkjfhk
 
hjg
 
fjkhgk
 
 
 
11
 
ghkkh
 
fghd
 
ghkgh
 
 
 
12
 
kjhjklhgkjgljghjh
 
hlg
 
kjghkjhgkj
 
 
 
13
 
kgk
 
d
 
kkjhgklh
 
 
 
14
 
hkjhgkjhklj
 
hjgk
 
lhjljhgygyh
 
 
 
15
 
ijihgjil
 
fg
 
lhjoklh
 
 
 
16
 
lohkjl
 
ghj
 
lholhuhity
 
 
 
17
 
kgjhgikghiu
 
ghjk
 
ljhljkyhklj
 
 
 
18
 
kgihgik
 
ghjg
 
iuhgouygih8
 
 
 
19
 
uoiughuiohou
 
ghkkj
 
oijhoiyhigouohu
 
 
 
20
 
ihnohnjoikjnm
 
fghfg
 
ioojhjphiuhiuhohouh
 
 
  

Answer 5

jQuery DataTables可能不是你想要的，但你有没有看过它？ 数据表文档包含“FixedHeader”的特殊部分，因此您可以查看许多实现。

http://datatables.net/examples/

一些相关的DataTables修复了文档中的标题示例：

1. http://datatables.net/release-datatables/extras/FixedHeader/two_tables.html

   “下面的例子显示了两个……表都启用了FixedHeader。页脚也是固定的……”

2. http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html

   “这个例子展示了如何使FixedHeader看起来更像电子表格应用程序。”