固定首行首列表格
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width,initial-scale=1.0'> <title>Title</title> <style> .table_wrap { width: 100%; height: 200px; overflow: auto; border-bottom: 1px solid #61dafb; } table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; border: 0; } td, th { width: 150px; box-sizing: border-box; border-right: 1px solid red; border-bottom: 1px solid red; /*超出长度...*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } thead tr th { position: sticky; top: 0; background: #61dafb; } th:first-child, td:first-child { position: sticky; left: 0; background: #61dafb; } th:first-child { z-index: 1; /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/ background: #61dafb; } </style> </head> <body> <div class='table_wrap'> <table> <thead> <tr> <th>11111111111111111111111111111</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> </div> </body> </html>
另一种
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css实现table固定列横向滚动，第一个表头斜线</title> <style> .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; } .fixedTable td[class=bob]:before{ content: ""; position: absolute; width: 1px; height:114px;/*这里需要自己调整，根据td的宽度和高度*/ top:0; left:0; background-color: #dedede; display: block; transform: rotate(-69deg);/*这里需要自己调整，根据线的位置*/ transform-origin: top; } </style> </head> <body> <div class="table"> <table class="fixedTable" border="1"> <tr> <td class="bob">固定列</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>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>固定列</td> <td class="fixedColumn"></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> </table> </div> </body> </html>
element table改造
<el-table :data="tableData" border style="width: 100%;margin-top: .1rem" :height="tabHeight"> <el-table-column fixed class-name="elChgTbeClmn" prop="dimName" label="日期" width="120"> <template slot="header" slot-scope="scope"> <div class="elHeadCon"> <div class="headerCon1">供应商</div> <div class="headerCon2 green" @click="goTime">时间</div> <div class="headerLine"></div> </div> </template> <template slot-scope="scope"> <span @click="goSupplier(scope.row)">{{ scope.row.dimName }}</span> </template> </el-table-column> <!-- <el-table-column prop="dimAvgAmount" :label="`${+radio === 1 ? '平均采购价' : '平均采购量'}`" width="120" align="center">--> <el-table-column prop="dimAvgAmount" label="平均采购价(元)" width="120" align="center"> <template slot-scope="scope"> <template v-if="+radio === 1"> {{ scope.row.dimAvgAmount || 0 | Thousands }} </template> <template v-else> {{ scope.row.dimAvgAmount || 0 | Thousands }} </template> </template> </el-table-column> <el-table-column prop="address" :label="Q1" align="center"> <template slot-scope="scope"> <template v-if="+scope.row.target === 1 && scope.row.quarter === +Q1.substr(5, 1)"> <span class="star2"></span> </template> <template v-if="+radio === 1"> {{ scope.row.purchaseAmount1 || 0 | Thousands }} </template> <template v-else> {{ scope.row.purchaseQuantity1 || 0 | Thousands }} </template> </template> </el-table-column> <el-table-column prop="name" :label="Q2" width="" align="center"> <template slot-scope="scope"> <template v-if="+scope.row.target === 1 && scope.row.quarter === +Q2.substr(5, 1)"> <span class="star2"></span> </template> <template v-if="+radio === 1"> {{ scope.row.purchaseAmount2 || 0 | Thousands }} </template> <template v-else> {{ scope.row.purchaseQuantity2 || 0 | Thousands }} </template> </template> </el-table-column> <el-table-column prop="address" :label="Q3" align="center"> <template slot-scope="scope"> <template v-if="+scope.row.target === 1 && scope.row.quarter === +Q3.substr(5, 1)"> <span class="star2"></span> </template> <template v-if="+radio === 1"> {{ scope.row.purchaseAmount3 || 0 | Thousands }} </template> <template v-else> {{ scope.row.purchaseQuantity3 || 0 | Thousands }} </template> </template> </el-table-column> <el-table-column prop="name" :label="Q4" width="" align="center"> <template slot-scope="scope"> <template v-if="+scope.row.target === 1 && scope.row.quarter === +Q4.substr(5, 1)"> <span class="star2"></span> </template> <template v-if="+radio === 1"> {{ scope.row.purchaseAmount4 || 0 | Thousands }} </template> <template v-else> {{ scope.row.purchaseQuantity4 || 0 | Thousands }} </template> </template> </el-table-column> <el-table-column prop="name" label="合计" width="" align="center"> <template slot-scope="scope"> <template v-if="+radio === 1"> {{ scope.row.totalAmount || 0 | Thousands }} </template> <template v-else> {{ scope.row.totalQty || 0 | Thousands }} </template> </template> </el-table-column> </el-table>
样式
.elChgTbeClmn .cell { padding: 0px !important; } .elHeadCon { height: 30px; position: relative; } .headerCon1 { position: absolute; left: 0; bottom: -3px; } .headerCon2 { position: absolute; right: 0; top: 0; } .headerLine { width: 1px; height: 150px; transform: rotate(-74deg); /*这里需要自己调整，根据线的位置*/ transform-origin: top; background-color: #dedede; }
position:sticky 粘性定位的几种巧妙应用
https://segmentfault.com/a/1190000039858711
