html 如何冻结菜单,如何创建带有固定/冻结的左列和可滚动主体的HTML表？

小编典典

如果您想要一个只有列水平滚动的表，则可以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

2020-05-10