使用css固定table第一列
.table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;} .fixedTable tr{line-height: 30px;border:1px solid #fff;} .fixedTable tr:first-child{height:40px;line-height: 40px;background-color:cadetblue;} .fixedTable td:first-child{position:absolute;width:105px;background-color:cadetblue;border:1px solid #fff;margin:-1px 0px 0px -1px;} .fixedColumn{width:99px;}
<html> <head> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no"> <meta charset="utf-8"> <title>使用css固定table第一列title> <link href="css/table.css" rel="stylesheet"/> head> <body> <div class="table"> <table class="fixedTable" border="1"> <tr><td>固定列td><td class="fixedColumn">td><td>第一列td><td>第二列td><td>第三列td><td>第四列td><td>第五列td><td>第六列td><td>第七列td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr> table> div> body> html>
适用移动端
代码地址:https://github.com/guyingguang/fixed_first_column