固定列

HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

心已入冬 提交于 2019-12-14 11:45:07
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好。一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使用表格拼接的方法,这个方案如果要制作静态的网页,或者功能简单的动态页面,逻辑比较简单,技术上也不复杂,很容易实现,但是如果要做成组件,动态功能较多的话,就需要写大量的冗余代码,难以维护,甚至于一个简单的功能,都需要写很多的代码,比如事件处理等,这个方法就显得比较笨拙,灵活性很差,不是一个好的方案。 经过长时间的分析研究,各种场景的试验,我们找到了一个兼容性非常好的解决方案,总体上来讲采用的是定位计算的方法,下面贴出代码,然后做个解读。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=