How do I create an HTML table with a fixed/frozen left column and a scrollable body?

后端未结

关注

 25  2308

有刺的猬 2020-11-21 22:27

I need a simple solution. I know it\'s similar to some other questions, like:

HTML table with fixed headers and a fixed column?
How can I lock the fir

25条回答

天命终不由人 (楼主)

2020-11-21 23:07

You can just make the first column position: sticky; z-index: 9. It will make the column/row stick to its current position. Checkout my example codepen here https://codepen.io/swastikmishra/pen/zYYdKBQ

HTML Example


        
            
                Hello World Hello World Hello World Hello World Hello World Hello World Hello World
                H11 H12 H13 H14 H15 H16 H17
                H21 H22 H23 H24 H25 H26 H27
                H31 H32 H33 H34 H35 H36 H37
                H41 H42 H44 H44 H45 H46 H47
                H51 H52 H54 H54 H55 H56 H57
                H61 H62 H64 H64 H65 H66 H67
                H71 H72 H74 H74 H75 H76 H77
                H81 H82 H84 H84 H85 H86 H87

Hello World	Hello World	Hello World	Hello World	Hello World	Hello World	Hello World
H11	H12	H13	H14	H15	H16	H17
H21	H22	H23	H24	H25	H26	H27
H31	H32	H33	H34	H35	H36	H37
H41	H42	H44	H44	H45	H46	H47
H51	H52	H54	H54	H55	H56	H57
H61	H62	H64	H64	H65	H66	H67
H71	H72	H74	H74	H75	H76	H77
H81	H82	H84	H84	H85	H86	H87

0 讨论(0)

查看其它25个回答

Hello World	Hello World	Hello World	Hello World	Hello World	Hello World	Hello World
H11	H12	H13	H14	H15	H16	H17
H21	H22	H23	H24	H25	H26	H27
H31	H32	H33	H34	H35	H36	H37
H41	H42	H44	H44	H45	H46	H47
H51	H52	H54	H54	H55	H56	H57
H61	H62	H64	H64	H65	H66	H67
H71	H72	H74	H74	H75	H76	H77
H81	H82	H84	H84	H85	H86	H87

Hello World	Hello World	Hello World	Hello World	Hello World	Hello World	Hello World
H11	H12	H13	H14	H15	H16	H17
H21	H22	H23	H24	H25	H26	H27
H31	H32	H33	H34	H35	H36	H37
H41	H42	H44	H44	H45	H46	H47
H51	H52	H54	H54	H55	H56	H57
H61	H62	H64	H64	H65	H66	H67
H71	H72	H74	H74	H75	H76	H77
H81	H82	H84	H84	H85	H86	H87

Hello World	Hello World	Hello World	Hello World	Hello World	Hello World	Hello World
H11	H12	H13	H14	H15	H16	H17
H21	H22	H23	H24	H25	H26	H27
H31	H32	H33	H34	H35	H36	H37
H41	H42	H44	H44	H45	H46	H47
H51	H52	H54	H54	H55	H56	H57
H61	H62	H64	H64	H65	H66	H67
H71	H72	H74	H74	H75	H76	H77
H81	H82	H84	H84	H85	H86	H87