纯CSS固定table表头position: sticky;
当前位置：点晴教程→知识管理交流
→『 技术文档交流 』
.table-container { width: 100%; height: 100%; overflow: auto; }
/* 首列固定 */ .table-container thead tr > th:first-child, .table-container tbody tr > td:first-child { position: sticky; left: 0; z-index: 1; }
/* 表头固定 */ .table-container thead tr > th { position: sticky; top: 0; z-index: 2; }
/* 表头首列强制最顶层 */ .table-container thead tr > th:first-child { z-index: 3; } 关键代码： /* 首列固定 */ .table-container thead tr > td:first-child, .table-container tbody tr > td:first-child { position: sticky; left: 0; z-index: 1; background-color: #ececec; } /* 表头固定 */ .table-container thead tr > td { position: sticky; top: 0; z-index: 2; } /* 表头首列强制最顶层 */ .table-container thead tr > td:first-child { z-index: 3; } 解析： 关键属性 css : 在 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位。之后，元素将固定在与顶部距离 0px 的位置，直到视口回滚到阈值以下； 同理： 在 视口滚动到元素 left距离小于 0px 之前，元素为相对定位。之后，元素将固定在与左边距离 0px 的位置，直到视口回滚到阈值以下； 粘性定位 - position: sticky 粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如: 兼容性问题： 该属性非常好用但是各大浏览器厂商不以为意，有兼容性得小伙伴请注意下自己业务使用哪种浏览器浏览。 IOS 家族（SAFARI && IOS SAFARI）和 Firefox 很早开始就支持 position:sticky 了。而 Chrome53~55 则需要启用实验性网络平台功能才行。其中 webkit 内核的要添加上私有前缀 -webkit-。 全部代码： 1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7. <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8. <title>Document</title> 9. <style> 10. .payedColor{ 11. color: #2eb132; 12. } 13. .grayColor{ 14. color: #c3afaf; 15. } 16. table { 17. font-size: 0.85rem; 18. color: #646566; 19. border-spacing: 0; 20. } 21. table .table-header { 22. height: 1.75rem; 23. line-height: 1.75rem; 24. } 25. table .table-row { 26. height: 1.75rem; 27. line-height: 1.75rem; 28. } 29. .table-row > td { 30. padding: 0 0.25rem; 31. white-space: nowrap; 32. border-right: 0.05rem solid #c1c1c1; 33. border-bottom: 0.05rem solid #c1c1c1; 34. } 35. .table-row:first-child > td { 36. border-top: 0.05rem solid #c1c1c1; 37. } 38. .table-row > td:first-child { 39. border-left: 0.05rem solid #c1c1c1; 40. vertical-align:middle; 41. } 42. .table-container { 43. width: 100%; 44. height: 100%; 45. overflow: auto; 46. } 47. 48. /* 首列固定 */ 49. 50. .table-container thead tr > td:first-child, 51. .table-container tbody tr > td:first-child { 52. position: sticky; 53. left: 0; 54. z-index: 1; 55. background-color: #ececec; 56. } 57. 58. /* 表头固定 */ 59. .table-container thead tr > td { 60. position: sticky; 61. top: 0; 62. z-index: 2; 63. } 64. 65. 66. /* 表头首列强制最顶层 */ 67. .table-container thead tr > td:first-child { 68. z-index: 3; 69. } 70. 71. .flex-row { 72. margin: 0 -0.25rem; 73. padding: 0.25rem; 74. } 75. .flex-row > div:first-child { 76. margin-right: 0.5rem; 77. } 78. input[type=date]::-webkit-clear-button { 79. visibility: hidden; /** 去掉日期控件清除按钮*/ 80. } 81. 82. .card-content { 83. display: flex; 84. flex-direction: column; 85. width: 90%; 86. min-height: 75px; 87. margin: 15px auto 0; 88. padding: 10px 0; 89. border-radius: 10px; 90. box-shadow: 1px 1px 10px -1px #9b9b9b; 91. font-size: 1.2rem; 92. background-color: #FFFFFF; 93. } 94. 95. input[type=date] { 96. width: 65%; 97. border-radius: 5px; 98. border: 1px solid grey; 99. padding-left: 10px; 100. } 101. 102. .van-field__body { 103. height: 100%; 104. } 105. 106. .btn-div{ 107. width: 100%; 108. margin: 30px auto 10px; 109. display: flex; 110. justify-content: space-around; 111. align-items: center; 112. } 113. .btn-common{ 114. width: 30%; 115. height: 35px; 116. border-radius: 16px; 117. padding: 6px 0; 118. color: #ffffff; 119. background: linear-gradient(to right, #fa8082, #f6a240); 120. display: flex; 121. justify-content: center; 122. align-items: center; 123. font-size: 14px; 124. } 125. .van-field__label { 126. display: flex; 127. align-items: center; 128. } 129. 130. .dropdown-menu > .active > a { 131. background-color: #ff8e31; 132. } 133. 134. .weui-cell__bd > label{ 135. width: 42%; 136. } 137. </style> 138. 139. </head> 140. 141. <body> 142. 143. <div class="table-container" style="width: 14%; height: 482px; margin: auto; overflow: auto"> 144. <table class="table table-bordered" style="text-align: center"> 145. <thead> 146. <tr class="table-row table-header"> 147. <td scope="col">楼层</td> 148. <td scope="col">1单元01号</td> 149. <td scope="col">1单元02号</td> 150. <td scope="col">2单元01号</td> 151. <td scope="col">2单元02号</td> 152. 153. </tr> 154. </thead> 155. <tbody><tr class="table-row"> 156. <td scope="col">30楼</td> 157. <td> 158. <div class="grayColor"> 159. <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)"> 160. <div>孙悟空</div> 161. <div>已交费</div> 162. <div>3001</div> 163. </div> 164. </div> 165. </td> 166. <td> 167. <div class="payedColor"> 168. <div class="flex-row" onclick="chooseHouse(this)"> 169. 170. <div>猪八戒</div> 171. 172. <div>已交费</div> 173. <div>3002</div> 174. </div> 175. </div> 176. </td> 177. <td> 178. <div class="grayColor"> 179. <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)"> 180. 181. <div>沙和尚</div> 182. 183. <div>未交费</div> 184. <div>3001</div> 185. </div> 186. </div> 187. </td> 188. <td> 189. <div class="grayColor"> 190. <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)"> 191. 192. <div>唐三藏</div> 193. 194. <div>未交费</div> 195. <div>3002</div> 196. </div> 197. </div> 198. </td> 199. </tr> 200. <tr class="table-row"> 201. <td scope="col">29楼</td> 202. <td> 203. <div class="payedColor"> 204. <div class="flex-row" onclick="chooseHouse(this)"> 205. 206. <div>公孙离</div> 207. 208. <div>已交费</div> 209. <div>2901</div> 210. </div> 211. </div> 212. </td> 213. <td> 214. <div class="payedColor"> 215. <div class="flex-row" onclick="chooseHouse(this)"> 216. 217. <div>李元芳</div> 218. 219. 220. <div>已交费</div> 221. <div>2902</div> 222. </div> 223. </div> 224. </td> 225. <td> 226. <div class="payedColor"> 227. <div class="flex-row" onclick="chooseHouse(this)"> 228. 229. <div>赵怀真</div> 230. 231. <div>已交费</div> 232. <div>2901</div> 233. </div> 234. </div> 235. </td> 236. <td> 237. <div class="payedColor"> 238. <div class="flex-row" onclick="chooseHouse(this)"> 239. 240. <div>夏洛特</div> 241. 242. <div>已交费</div> 243. <div>2902</div> 244. </div> 245. </div> 246. </td> 247. </tr> 248. <tr class="table-row"> 249. <td scope="col">28楼</td> 250. <td> 251. <div class="grayColor"> 252. <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)"> 253. 254. <div>诸葛亮</div> 255. 256. <div>未交费</div> 257. <div>2801</div> 258. </div> 259. </div> 260. </td> 261. <td> 262. <div class="payedColor"> 263. <div class="flex-row" onclick="chooseHouse(this)"> 264. 265. <div>周瑜</div> 266. 267. <div>已交费</div> 268. <div>2802</div> 269. </div> 270. </div> 271. </td> 272. <td> 273. <div class="grayColor"> 274. <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)"> 275. 276. <div>小乔</div> 277. 278. <div>未交费</div> 279. <div>2801</div> 280. </div> 281. </div> 282. </td> 283. <td> 284. <div class="payedColor"> 285. <div class="flex-row" onclick="chooseHouse(this)"> 286. 287. <div>东方要</div> 288. 289. <div>已交费</div> 290. <div>2802</div> 291. </div> 292. </div> 293. </td> 294. </tr> 295. <tr class="table-row"> 296. <td scope="col">27楼</td> 297. <td> 298. <div class="payedColor"> 299. <div class="flex-row" onclick="chooseHouse(this)"> 300. 301. <div>程咬金</div> 302. 303. <div>已交费</div> 304. <div>2701</div> 305. </div> 306. </div> 307. </td> 308. <td> 309. <div class="payedColor"> 310. <div class="flex-row" onclick="chooseHouse(this)"> 311. 312. <div>哪吒</div> 313. 314. <div>已交费</div> 315. <div>2702</div> 316. </div> 317. </div> 318. </td> 319. <td> 320. <div class="payedColor"> 321. <div class="flex-row" onclick="chooseHouse(this)"> 322. 323. <div>杨戬</div> 324. 325. <div>已交费</div> 326. <div>2701</div> 327. </div> 328. </div> 329. </td> 330. <td> 331. <div class="grayColor"> 332. <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)"> 333. 334. <div>孙尚香</div> 335. 336. <div>未交费</div> 337. <div>2702</div> 338. </div> 339. </div> 340. </td> 341. </tr> 342. 343. <tr class="table-row"> 344. <td scope="col">26楼</td> 345. <td> 346. <div class="payedColor"> 347. <div class="flex-row" onclick="chooseHouse(this)"> 348. 349. <div>程咬金</div> 350. 351. <div>已交费</div> 352. <div>2701</div> 353. </div> 354. </div> 355. </td> 356. <td> 357. <div class="payedColor"> 358. <div class="flex-row" onclick="chooseHouse(this)"> 359. 360. <div>哪吒</div> 361. 362. <div>已交费</div> 363. <div>2702</div> 364. </div> 365. </div> 366. </td> 367. <td> 368. <div class="payedColor"> 369. <div class="flex-row" onclick="chooseHouse(this)"> 370. 371. <div>杨戬</div> 372. 373. <div>已交费</div> 374. <div>2701</div> 375. </div> 376. </div> 377. </td> 378. <td> 379. <div class="grayColor"> 380. <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)"> 381. 382. <div>孙尚香</div> 383. 384. <div>未交费</div> 385. <div>2702</div> 386. </div> 387. </div> 388. </td> 389. </tr> 390. <tr class="table-row"> 391. <td scope="col">25楼</td> 392. <td> 393. <div class="payedColor"> 394. <div class="flex-row" onclick="chooseHouse(this)"> 395. 396. <div>程咬金</div> 397. 398. <div>已交费</div> 399. <div>2701</div> 400. </div> 401. </div> 402. </td> 403. <td> 404. <div class="payedColor"> 405. <div class="flex-row" onclick="chooseHouse(this)"> 406. 407. <div>哪吒</div> 408. 409. <div>已交费</div> 410. <div>2702</div> 411. </div> 412. </div> 413. </td> 414. <td> 415. <div class="payedColor"> 416. <div class="flex-row" onclick="chooseHouse(this)"> 417. 418. <div>杨戬</div> 419. 420. <div>已交费</div> 421. <div>2701</div> 422. </div> 423. </div> 424. </td> 425. <td> 426. <div class="grayColor"> 427. <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)"> 428. 429. <div>孙尚香</div> 430. 431. <div>未交费</div> 432. <div>2702</div> 433. </div> 434. </div> 435. </td> 436. </tr> 437. 438. </tbody></table> 439. </div> 440. </body> 441. <script src="http://s.yidaichu.com/r/libs/js/jquery-3.1.1.min.js"></script> 442. <script> 443. 444. </script> 445. 446.</html> 该文章在 2023/12/11 0:28:55 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
