查看DEMO演示效果 https://gong.gg/my-test/table/index.html
1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <title>table表头和列固定</title> 6 <style> 7 .container { 8 width: 800px; 9 height: 300px; 10 overflow: scroll; 11 border: 1px solid #ccc; 12 } 13 table { 14 border-collapse: collapse; 15 } 16 table tbody tr:nth-child(odd) td { 17 background-color: #f5f5f5; 18 } 19 table thead tr > th { 20 position: sticky; 21 top: 0; 22 background: #ccc; 23 } 24 table tbody tr > td { 25 border: 1px solid #eee; 26 min-width: 100px; 27 } 28 table thead tr > th, 29 table tbody tr > td { 30 padding: 10px; 31 } 32 table thead tr > th:first-child, 33 table thead tr > th:last-child { 34 z-index: 1; 35 } 36 table thead tr > th:first-child, 37 table tbody tr > td:first-child, 38 table thead tr > th:last-child, 39 table tbody tr > td:last-child { 40 position: sticky; 41 text-align: center; 42 } 43 table thead tr > th:first-child, 44 table tbody tr > td:first-child { 45 left: 0; 46 -webkit-box-shadow: 1px 0px 1px #ddd; 47 -moz-box-shadow: 1px 0px 1px #ddd; 48 box-shadow: 1px 0px 1px #ddd; 49 -webkit-box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3); 50 -moz-box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3); 51 box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3); 52 } 53 table thead tr > th:last-child, 54 table tbody tr > td:last-child { 55 right: 0; 56 -webkit-box-shadow: 0px 0px 1px #ddd; 57 -moz-box-shadow: 0px 0px 1px #ddd; 58 box-shadow: 0px 0px 1px #ddd; 59 -webkit-box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3); 60 -moz-box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3); 61 box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3); 62 } 63 table tbody tr > td:first-child, 64 table tbody tr > td:last-child { 65 background: #fff; 66 } 67 </style> 68</head> 69<body> 70 <p>标题、第一列、最后一列固定、方便操作和数据对应表头</p> 71 <p>下面提供了一个简单的演示、具体的实际效果可以查看 <a href="https://shopxo.net/" target="_blank">ShopXO</a> 系统中的应用</p> 72 <div class="container"> 73 <table> 74 <thead> 75 <tr> 76 <th>title1</th> 77 <th>title2</th> 78 <th>title3</th> 79 <th>title4</th> 80 <th>title5</th> 81 <th>title6</th> 82 <th>title7</th> 83 <th>title8</th> 84 <th>title9</th> 85 <th>title10</th> 86 </tr> 87 </thead> 88 <tbody> 89 <tr> 90 <td>data1-1</td> 91 <td>data1-2</td> 92 <td>data1-3</td> 93 <td>data1-4</td> 94 <td>data1-5</td> 95 <td>data1-6</td> 96 <td>data1-7</td> 97 <td>data1-8</td> 98 <td>data1-9</td> 99 <td>data1-10</td> 100 </tr> 101 <tr> 102 <td>data2-1</td> 103 <td>data2-2</td> 104 <td>data2-3</td> 105 <td>data2-4</td> 106 <td>data2-5</td> 107 <td>data2-6</td> 108 <td>data2-7</td> 109 <td>data2-8</td> 110 <td>data2-9</td> 111 <td>data2-10</td> 112 </tr> 113 <tr> 114 <td>data3-1</td> 115 <td>data3-2</td> 116 <td>data3-3</td> 117 <td>data3-4</td> 118 <td>data3-5</td> 119 <td>data3-6</td> 120 <td>data3-7</td> 121 <td>data3-8</td> 122 <td>data3-9</td> 123 <td>data3-10</td> 124 </tr> 125 <tr> 126 <td>data4-1</td> 127 <td>data4-2</td> 128 <td>data4-3</td> 129 <td>data4-4</td> 130 <td>data4-5</td> 131 <td>data4-6</td> 132 <td>data4-7</td> 133 <td>data4-8</td> 134 <td>data4-9</td> 135 <td>data4-10</td> 136 </tr> 137 <tr> 138 <td>data5-1</td> 139 <td>data5-2</td> 140 <td>data5-3</td> 141 <td>data5-4</td> 142 <td>data5-5</td> 143 <td>data5-6</td> 144 <td>data5-7</td> 145 <td>data5-8</td> 146 <td>data5-9</td> 147 <td>data5-10</td> 148 </tr> 149 <tr> 150 <td>data6-1</td> 151 <td>data6-2</td> 152 <td>data6-3</td> 153 <td>data6-4</td> 154 <td>data6-5</td> 155 <td>data6-6</td> 156 <td>data6-7</td> 157 <td>data6-8</td> 158 <td>data6-9</td> 159 <td>data6-10</td> 160 </tr> 161 <tr> 162 <td>data7-1</td> 163 <td>data7-2</td> 164 <td>data7-3</td> 165 <td>data7-4</td> 166 <td>data7-5</td> 167 <td>data7-6</td> 168 <td>data7-7</td> 169 <td>data7-8</td> 170 <td>data7-9</td> 171 <td>data7-10</td> 172 </tr> 173 <tr> 174 <td>data8-1</td> 175 <td>data8-2</td> 176 <td>data8-3</td> 177 <td>data8-4</td> 178 <td>data8-5</td> 179 <td>data8-6</td> 180 <td>data8-7</td> 181 <td>data8-8</td> 182 <td>data8-9</td> 183 <td>data8-10</td> 184 </tr> 185 <tr> 186 <td>data9-1</td> 187 <td>data9-2</td> 188 <td>data9-3</td> 189 <td>data9-4</td> 190 <td>data9-5</td> 191 <td>data9-6</td> 192 <td>data9-7</td> 193 <td>data9-8</td> 194 <td>data9-9</td> 195 <td>data9-10</td> 196 </tr> 197 <tr> 198 <td>data10-1</td> 199 <td>data10-2</td> 200 <td>data10-3</td> 201 <td>data10-4</td> 202 <td>data10-5</td> 203 <td>data10-6</td> 204 <td>data10-7</td> 205 <td>data10-8</td> 206 <td>data10-9</td> 207 <td>data10-10</td> 208 </tr> 209 </tbody> 210 </table> 211 </div> 212</body> 213</html>