HTML+CSS+JS实现TABLE固定列（常见浏览器兼容）的最佳实践_html/css

Home

Web Front-end

HTML Tutorial

HTML+CSS+JS实现TABLE固定列（常见浏览器兼容）的最佳实践_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:14 AM

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="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">function divScroll(scrollDiv){    var scrollLeft = scrollDiv.scrollLeft;    document.getElementById("tableDiv_title").scrollLeft = scrollLeft;    document.getElementById("tableDiv_body").scrollLeft = scrollLeft;        }function divYScroll(scrollYDiv){    var scrollTop = scrollYDiv.scrollTop;    document.getElementById("tableDiv_y").scrollTop = scrollTop;    }function onwheel(event){    var evt = event||window.event;    var bodyDivY = document.getElementById("tableDiv_y");    var scrollDivY = document.getElementById("scrollDiv_y");    if (bodyDivY.scrollHeight>bodyDivY.offsetHeight){        if (evt.deltaY){            bodyDivY.scrollTop = bodyDivY.scrollTop + evt.deltaY*7;            scrollDivY.scrollTop = scrollDivY.scrollTop + evt.deltaY*7;        }else{            bodyDivY.scrollTop = bodyDivY.scrollTop - evt.wheelDelta/5;            scrollDivY.scrollTop = scrollDivY.scrollTop - evt.wheelDelta/5;        }    }}</script><style type="text/css">body {margin:0;padding:0;}table {border-collapse:collapse;border:0;border:none;}table td  {border:1px solid #000;overflow:hidden;padding:0 2px;}</style></head><body><div style="width:500px; position:relative; padding-right:18px;">   <div style="position:relative;height:368px;overflow:hidden;width:100%">    <div style="padding-left:108px; width:auto;  overflow:hidden; background:#f00;" id="tableDiv_title" >    <table border="0" cellspacing="0" cellpadding="0"  >      <tr>        <td  style="min-width:30px; max-width:30px; left:0; top:0; width:30px;  overflow:hidden; background-color:#f00;position:absolute;z-index:1;">000</td>        <td  style="min-width:74px; max-width:74px; left:30px; top:0; width:74px;  overflow:hidden; background-color:#f00;position:absolute;z-index:1;">自动表格</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>      </tr>      </table>      </div>      <div style="overflow:hidden; position:absolute;height:128px; width:100%;" id="tableDiv_y" onmousewheel="onwheel(event);" onwheel="onwheel(event);">       <div style="padding-left:108px; width:auto;overflow:hidden;" id="tableDiv_body">        <table border="0" cellspacing="0" cellpadding="0" >          <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">001</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>           <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff; position:absolute; z-index:1;">002</td>            <td  style="min-width:74px; max-width:74px; left:30px; width:74px; overflow:hidden;background-color:#fff; position:absolute; z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>          <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">003</td>            <td  style="min-width:74px; max-width:74px;left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>          <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">004</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">005</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">006</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>               <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">007</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">008</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">009</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>            <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">010</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>                   </table>    </div>              </div>      <div style="background-color:#eee;overflow:hidden;top:150px; width:100%; z-index:2;position:absolute;">        <div style="margin-left:108px; width:auto;overflow-x:scroll;overflow-y:hidden;" onscroll='divScroll(this);'>            <div style="width:630px; height:1px;"></div>        </div>    </div>    </div>        <div id="scrollDiv_y" style="display:block; overflow-x:hidden; overflow-y:scroll; position:absolute; top:22px; right:0px; height:118px; padding-bottom:10px;" onscroll='divYScroll(this);'>            <div style="width:1px; height:194px;"></div>         </div>    </div>   </div></body></html>

一、总体结构：

页面基本元素为DIV+TABLE，固定的列采用绝对定位的方式固定，每一列都要指定固定宽度，为了解决横竖滚动条的问题，表头和表体的外面分别包裹两层DIV，滚动条采用虚拟的方式，固定在固定位置通过JS控制模拟正常DIV滚动条的效果。

二、定位：

固定的列要绝对定位，通过left属性控制左侧位移，为了保证固定列浮动在上方，设置z-index为1,。为了保证有竖滚动条时的正常显示，表体的外层DIV为绝对定位，由此导致滚动条也都要绝对定位。还有，表头和表体以及滚动条的内层DIV通过margin-left属性控制左侧外边距，把固定列的偏移量空余出来。

二、宽度计算：

每一列的宽度都要指定固定的值，并且要注意一个关键点，就是还要加上min-width和max-width属性，这两个属性和width值相等，表头表体的内层DIV，宽度为auto，自适应表格宽度，外层DIV宽度为100%，最外层的DIV通过padding-right属性控制右侧内边距，将竖滚动条的位置空余出来。

三、高度计算：

因为绝对定位的存在，整个表格组件的高度要指定，可以通过计算得出，

四、滚动条：

本方案一个突出特点，就是虚拟的滚动条，就是通过一个和表格一样宽、高度为一个像素的DIV模拟出表体DIV的横向滚动条，竖滚动条同理。之所以采用这个形式，一个是横向滚动条这样处理比较美观，竖滚动条这样处理之后，表头和表体的DIV宽度不用计算了，都为100%，否则存在滚动条时，表头和横向滚动条要空出竖滚动条宽度的位移，这个计算倒不复杂，但是某些情况下存在问题，在此不展开了。

五、滚动事件：

因为表体的滚动条都隐藏了，导致鼠标滚轮不起作用了，这样就需要用JS处理鼠标滚轮事件，本文的样例代码兼容常见浏览器。

六、优缺点分析：

本文的解决方案已经经过我们的精简，重点是讲清楚原理，在我们的实际中，非常的复杂。

这个方案的优点是，如果要做组件的话，因为HTML结构简单，JS控制代码非常干净，维护容易。缺点就是计算过多。我们认为该方案比较适用于开发组件的情况，静态页面并不适用。

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks agoByDDD

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Hot Topics

Where is the login entrance for gmail email?

7338

1627

1352

1265

1210