原文出处：Css之 table表格 实现表头滚动固定并且固定最后一列在右侧_灼灼桃花夭的博客-CSDN博客
固定表头
/qq_36939013/article/details/108101677
固定最后一列在最右侧
/weixin_39884872/article/details/117763346
纯css 实现 table固定首行、首列以及最后一列冻结
/a876459952/p/15737003.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.table_wrap {width: 100%;height: 100px;overflow: auto;border-bottom:1px solid #61dafb;}table {table-layout: fixed;width: 100%;border-collapse: separate;border-spacing: 0;border: 1px solid #DDDDDD;}/* 表格th/td样式 */td,th {width: 150px;box-sizing: border-box;border-right: 1px solid #DDDDDD;border-bottom: 1px solid #DDDDDD;/*单元格 超出长度 显示...*/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;height: 30px;}/* 表头固定 */thead tr th {position: sticky;top: 0;background: #F4F4F5;height: 30px;}/* 首列固定/最后一列固定*/th:first-child,th:last-child,td:first-child,td:last-child {position: sticky;left: 0;background: #F4F4F5;text-align: center;right: 0px;border-left: 1px solid #DDDDDD ;width: 100px;}/* 表头首列和最后一列强制最顶层 */th:last-child,th:first-child {z-index: 3;/*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/background: #F4F4F5;}</style></head><body><div className="table_wrap"><table><thead><tr><th>序号</th><th>栏目1</th><th>栏目2</th><th>栏目3</th><th>栏目4</th><th>栏目2</th><th>栏目3</th><th>栏目4</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>2</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>3</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>4</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>5</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>6</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>7</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>8</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>9</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>10</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>11</td><td>2</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>12</td><td>2</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>13</td><td>2</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr><tr><td>14</td><td>2</td><td>3</td><td>4</td><td>5</td><td><a href="#">修改</a></td></tr></tbody></table></div></body></html>
