在项目开发过程中，遇到需要固定表头和左侧列的情况，查了很多资料，网上有的给的是两表格进行固定，要计算两个表格每一行的高度，非常复杂。于是参考了一些网上的资料，动手写了一个复杂表头和多列同时固定的Demo，废话不多说，直接上代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纯css实现表格多行多列固定</title> <style> .main { width: 800px; overflow: auto; height: 208px; /* 设置固定高度 */ } td, th { /* 设置td,th宽度高度 */ border: 1px solid gray; width: 150px; height: 30px; background-color: white; } table { table-layout: fixed; width: 200px; /* 固定宽度 */ } /*设置列固定*/ td:first-child, th:first-child { position: sticky; left: 0; /* 首行永远固定在左侧 */ } td:nth-child(2), th:nth-child(2) { position: sticky; left: 150px; /* 首行永远固定在左侧 */ } td:nth-child(3), th:nth-child(3) { position: sticky; left: 300px; /* 首行永远固定在左侧 */ } /*设置行固定*/ thead tr:first-child th { position: sticky; top: 0; } thead tr:nth-child(2) th { position: sticky; top: 34px; } /*左侧th浮在最上层*/ th:first-child,th:nth-child(2),th:nth-child(3) { z-index: 3; } /*通过第二行的th固定确定右侧th的层次*/ thead tr:nth-child(2) th { z-index: 2; } </style> </head> <body> <div id="app"> <div class="main"> <table cellspacing="0"> <thead> <tr> <th rowspan="2">标题1</th> <th rowspan="2">标题2</th> <th rowspan="2">标题3</th> <th colspan="2">标题4</th> <th colspan="2">标题5</th> <th colspan="2">标题6</th> </tr> <tr> <th>标题4_1</th> <th>标题4_2</th> <th>标题5_1</th> <th>标题5_2</th> <th>标题6_1</th> <th>标题6_2</th> </tr> </thead> <tbody> <tr v-for="(item, index) in 30" key="index"> <td>行1</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr v-for="(item, index) in 30" key="index"> <td>行2</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr v-for="(item, index) in 30" key="index"> <td>行3</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr v-for="(item, index) in 30" key="index"> <td>行4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr v-for="(item, index) in 30" key="index"> <td>行5</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr v-for="(item, index) in 30" key="index"> <td>行6</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr v-for="(item, index) in 30" key="index"> <td>行7</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr v-for="(item, index) in 30" key="index"> <td>行8</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> </div> </div> </body> </html>