table实现固定行列效果

### 表格制作 ```css 1、table的常用属性 1.1、cellspacing和cellspadding区别 属性 含义 常用属性值 cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2px) cellspadding 设置单元格内容与单元格边框之间的空白距离 像素值(默认为1px) 1.2、table-layout fixed: 列宽由表格宽度和列宽度设定。 auto: 默认。列宽度由单元格内容设定。 inherit: 规定应该从父元素继承 table-layout 属性的值。 2、固定行 /* 固定行 */ thead th { background-color: antiquewhite; position: sticky; position: -webkit-sticky; top: 0; } thead th:first-child { z-index: 20; } 3、固定列 /**固定首列**/ th:first-child , td:first-child { position: sticky; /* 首列使用粘性属性，固定到原位置 */ position: -webkit-sticky; left: 0; /* 使用sticky时需要配置定位标识 */ background-color: bisque; z-index: 10; /* 在滑动时，后面的内容会覆盖掉前首列单元，需要设置z级别 */ }

4、常见问题 4.1、当外层div固定宽高后，对table每个单元格th和tb的width设置后，当行的单元格width的总和超过div的width时，此时单元格的width 无效，会出现自动平分每个单元格，具体原因是 table-layout默认auto,它是列宽根据内容自适应。 解决方式：table上的table-layout属性修改成fixed，固定表格，对应的列宽将影响到整体表格宽高 demo <div> <table> <thead> <tr><th></th><th></th><th></th><th></th></tr> </thead> <tbody> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> </tbody> </table> </div> <style> /** * 最外层盒子处理 * 1、设置边框 考虑每列的边框是 右边、下边框，最外层盒子就进设置左边、上边框 * 2、固定宽高，当出现内容溢出时，自动显示滚动条 * 3、table标签中消除每个列格原生的占用空间， * cellspacing="0" // 消除每个单元格的间距 * cellpadding="0" // 消除每个单元格的内间距 **/ .box { overflow: auto; /*table列超出宽度后，自动出现滚动条*/ width: 300px; //height: 240px; border: 1px solid #DCDCDC; border-right: 0; border-bottom: 0; box-sizing: border-box; } table { border-collapse: separate; /**处理边框重叠情况**/ table-layout: fixed; /**固定表格,使单元格宽度可设置**/ width: 100%; } th,td { width: 100px; height: 20px; border-right: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; } /* 固定行 */ thead th { background-color: antiquewhite; position: sticky; position: -webkit-sticky; top: 0; } thead th:first-child { z-index: 20; } /**固定首列**/ th:first-child , td:first-child { position: sticky; /* 首列使用粘性属性，固定到原位置 */ position: -webkit-sticky; left: 0; /* 使用sticky时需要配置定位标识 */ background-color: bisque; z-index: 10; /* 在滑动时，后面的内容会覆盖掉前首列单元，需要设置z级别 */ } </style> ```