HTML表头固定,内容滚动实现

2023年6月20日发(作者：)

HTML表头固定，内容滚动实现在前端开发过程中，经常会遇到⼀个需求就是，需要⼀个表格展⽰数据，1、表头固定，内容过多的时候向下活动，表头不跟随移动，若表体内容超长时，表头不能移动，表体内容滚动显⽰；2、表格头横向随表格内容横向滚动；效果展⽰：关键技术点：1、表头（意义上的）和表体（意义上的）都⽤⼀个table来显⽰；2、因为表体可以纵向滚动，右边多出⼀个纵向滚动条，所以表体的宽度要⽐表头的宽度多出17个像素，也就是说，如果要设置表格的宽度是500的话，表体的宽度为100%，那表头的宽度就是减去17个像素，就是calc(100% - 17px)；3、列宽要固定，两个table节点的table-layout样式为fixed代码展⽰：

2023年6月20日发(作者：)

HTML表头固定，内容滚动实现在前端开发过程中，经常会遇到⼀个需求就是，需要⼀个表格展⽰数据，1、表头固定，内容过多的时候向下活动，表头不跟随移动，若表体内容超长时，表头不能移动，表体内容滚动显⽰；2、表格头横向随表格内容横向滚动；效果展⽰：关键技术点：1、表头（意义上的）和表体（意义上的）都⽤⼀个table来显⽰；2、因为表体可以纵向滚动，右边多出⼀个纵向滚动条，所以表体的宽度要⽐表头的宽度多出17个像素，也就是说，如果要设置表格的宽度是500的话，表体的宽度为100%，那表头的宽度就是减去17个像素，就是calc(100% - 17px)；3、列宽要固定，两个table节点的table-layout样式为fixed代码展⽰：