| aaa | aaa2 | a | b | c | d | e | f | a | b | c | d | e | f | a | b | c | d | e | f | a | b | c | d | e | f |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| aaa | aaa2 | a | b | c | d | e | f | a | b | c | d | e | f | a | b | c | d | e | f | a | b | c | d | e | f |
| bbb | bbb2 | a | b | c | d | e | f | a | b | c | d | e | f | a | b | c | d | e | f | a | b | c | d | e | f |
如何创建具有固定/冻结左列和可滚动主体的HTML表？
我需要一个简单的解决方案 我知道它与其他一些问题类似,例如:
带有固定标题和固定列的HTML表格？
滚动时如何锁定表格的第一行和第一列,可能使用JavaScript和CSS？
但我只需要一个左栏就可以冻结,我更喜欢一个简单且无脚本的解决方案.
如果您想要一个只有列水平滚动的表,您可以position: absolute在第一列(并明确指定其宽度),然后将整个表包装在一个overflow-x: scroll 块中.不要在IE7中尝试这个,但是......
相关的HTML和CSS:
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td, th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}
1 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 2 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 3 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 4 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 5 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 6 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM
这是一个有趣的jQuery插件,可以创建固定的标题和/或列.在演示页面上将固定列切换为true以查看其运行情况.
在左侧固定宽度的情况下,最佳解决方案由Eamon Nerbonne提供.
如果左列的宽度可变,我找到的最佳解决方案是制作两个相同的表并将一个推到另一个之上.演示:http://jsfiddle.net/xG5QH/6/.
aaaaaaa ccccccccccc asdsad asd as ccccccccccc asdsad asd as cccccccc xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz
aaaaaaa ccccccccccc asdsad asd as ccccccccccc asdsad asd as cccccccc xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz
FWIW,这是一个可以滚动的表,头部和侧面是固定的.
http://codepen.io/ajkochanowicz/pen/KHdih
有点晚了,但在为自己尝试解决方案时,我确实遇到了这个问题.假设你现在使用现代浏览器,我想出了一个使用CSS calc()的解决方案来帮助保证宽度达到.
.table-fixed-left table,
.table-fixed-right table {
border-collapse: collapse;
}
.table-fixed-right td,
.table-fixed-right th,
.table-fixed-left td,
.table-fixed-left th {
border: 1px solid #ddd;
padding: 5px 5px;
}
.table-fixed-left {
width: 120px;
float: left;
position: fixed;
overflow-x: scroll;
white-space: nowrap;
text-align: left;
border: 1px solid #ddd;
z-index: 2;
}
.table-fixed-right {
width: calc(100% - 145px);
right: 15px;
position: fixed;
overflow-x: scroll;
border: 1px solid #ddd;
white-space: nowrap;
}
.table-fixed-right td,
.table-fixed-right th {
padding: 5px 10px;
}
Normal Header
Header with extra line
Normal Header
Normal with extra line
Normal Header
Normal Header
Header
Another header
Header
Header really really really really long
Info Long
Info
with second line
Info
with second line
Info Long
Info Long
Info Long
Info Long
Info Long
Info
with second line
Info
with second line
Info
with second line
Info
Info
Info
Info
Info
Info
Info
Info
Info
用左键调整左栏的样式position: fixed.(你可能想要使用top和left样式来控制它究竟发生的位置.)
您可以使用sticky位置。这是示例代码。这是HTML / CSS解决方案。不需要js。
HTML：
Number First Name Last Name Employer 1 Mark Ham Micro 2 Jacob Smith Adob Adob Adob AdobAdob Adob Adob Adob Adob 3 Larry Wen Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog
CSS：
.view {
margin: auto;
width: 600px;
}
.wrapper {
position: relative;
overflow: auto;
border: 1px solid black;
white-space: nowrap;
}
.sticky-col {
position: sticky;
position: -webkit-sticky;
background-color: white;
}
.first-col {
width: 100px;
min-width: 100px;
max-width: 100px;
left: 0px;
}
.second-col {
width: 150px;
min-width: 150px;
max-width: 150px;
left: 100px;
}
Bootply代码：https：//www.bootply.com/g8pfBXOcY9
我拿了Earmon Nerbonne的答案并编辑它以使用填满整个宽度的表格.
http://jsfiddle.net/DYgD6/6/
testdoc
1 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 2 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 3 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 4 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 5 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 6 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 7 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 8 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM 9 QWERTYUIOPASDFGHJKLZXCVBNM QWERTYUIOPASDFGHJKLZXCVBNM
但是,固定列的宽度仍然需要是设定值.
如果您要开发更复杂的东西，并希望将多列固定/卡在左侧，则可能需要这样的东西。
.wrapper {
overflow-x: scroll;
}
td {
min-width: 50px;
}
.fixed {
position: absolute;
background: #aaa;
}
aaa
aaa2
a
b
c
d
e
f
a
b
c
d
e
f
a
b
c
d
e
f
a
b
c
d
e
f
aaa
aaa2
a
b
c
d
e
f
a
b
c
d
e
f
a
b
c
d
e
f
a
b
c
d
e
f
bbb
bbb2
a
b
c
d
e
f
a
b
c
d
e
f
a
b
c
d
e
f
a
b
c
d
e
f
京公网安备 11010802040832号 | 京ICP备19059560号-6 
