css 表单头部固定

最新推荐文章于 2023-08-22 10:42:17 发布

weixin_30707875

最新推荐文章于 2023-08-22 10:42:17 发布

阅读量357

点赞数

原文链接：http://www.cnblogs.com/limit1/p/8744979.html

版权

原创 https://blog.csdn.net/q3585914/article/details/69946478

table表头和首列的表格固定-CSS实现的Table表头固定

原创 2017年04月10日 14:06:21

标签：
固定表头 /
css /
html

14190

这里写图片描述

效果就是上图表头是固定的，
跟随滑动轴动，左边第一列也是可以跟谁滑动轴滚动
下面是代码原文是查看

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content="jack"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, user-scalable=no" /> <!-- 适应手机屏幕，防止屏幕缩放 --> <!--样式--> <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css"> </head> <body> <title>固定表头和首列的表格</title> <style type="text/css"> #left_div{ width:100px; float: left; } #left_div1{ width: 100%; } #left_div2{ margin-top:-20px; width: 100%; height: 400px; overflow: hidden; } #left_table1 th{ background: #E9F8FF; text-align:center; } #left_table2 th{ text-align:center; } #right_div{ float: left; } #right_div1{ width: 100%; overflow: hidden; } #right_divx{ width: 900px; } #right_div2{ margin-top:-20px; width:100%; height:400px; overflow: auto; } #right_table1{ width: 880px; } #right_table2{ /**width和max-width一起写，手机浏览器打开也能固定长度**/ width: 880px; max-width: 880px; white-space:nowrap; } #right_table1 th{ background: #E9F8FF; text-align:center; width:10%; } #right_table2 td{ width:10%; text-align:center; } </style> <div class="container-fluid"> <div id="left_div"> <div id="left_div1"> <table id="left_table1" class="table table-bordered"> <tr> <th>我不会动</th> </tr> </table> </div> <div id="left_div2"> <table id="left_table2" class="table table-bordered"> </table> </div> </div> <div

转载于:https://www.cnblogs.com/limit1/p/8744979.html

weixin_30707875

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 表单头部固定

原创 https://blog.csdn.net/q3585914/article/details/69946478table表头和首列的表格固定-CSS实现的Table表头固定原创2017年04月10日 14:06:21标签：固定表头/css/html14190效果就是上图表头是固定的，跟随滑动轴动，左边第一列也是可以...
复制链接

扫一扫