本文主要是介绍表格头部和首列固定的实现代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
实现思路:不采用定位的写法,直接用js控制。通过表格内容的滑动来带动表头和首列一起滑动。所以,可滑动的区域是内容除开第一列的部分。因为采用的js控制,所以,该表格能放在页面中的任何位置,都不会影响滚动。
效果图:
全部代码如下:
<!DOCTYPE html>
<html lang="zh-cn"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>头部和首列固定</title><style>/* Reset*/body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,menu,input,fieldset,textarea,button,select,th,td,div,span,header,nav,footer{margin:0;padding:0;-webkit-text-size-adjust:none;}h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal;font-size:100%;}li{list-style:none;}em,i{font-style:normal;}a,a:visited{border:none;text-decoration:none;}fieldset,img,input{border:none;}input,textarea{outline:none;resize:none;-webkit-appearance:none;}html{/*font-size:62.5%;*/}body{word-wrap: break-word;font-size: 12px;font-family:/* En*/'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu', 'Helvetica Neue'
这篇关于表格头部和首列固定的实现代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!