<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>css冻结列的效果</title>
<!-- 1.div里面放table或者其它容器，当子容器的宽度大于父容器时，父容器就会出现滚动条。
2.头部固定不动的列让它脱离文档流(position:fixed|absolute)，然后给table一个margin-left值避免给固定列挡住
3.尾部固定不动的列让它脱离文档流(position:absolute)，然后给尾巴添加一个占位td,因为尾部固定列会挡住最后一列
4.注意：固定列加了position:absolute不能相对于自己父亲元素(table和div),否则固定不了。 -->
<style type="text/css">

.container{
width:200px;
overflow: scroll;
}

table{
border-collapse: collapse;
border: 1px solid #000;
width:100%;
margin-left:25px;
margin-right:25px;
}

table td{
border: 1px solid #666666;
width:30px;
}

.head{
background-color:red;
position: fixed;
left:0;
}

.foot{
background-color:red;
position: absolute;
left:150px;
}

.title{
width:50px;
}

</style>

</head>
<body >

<div class="container">
<table>
<tr><td class="head"><div>固定标题</div></td>
<td>标题2</td>
<td>标题3</td>
<td>标题4</td>
<td>标题5</td>

<td>标题1</td>
<td>标题1</td>
<td>标题1</td>
<td>标题1</td>
<td>标题1</td>

<td>标题1</td>
<td>标题1</td>
<td>标题1</td>
<td>标题(last)</td>
<td>占位</td>
<td class="foot">固定标题</td>
</tr>

<tr>
<td class="head">内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>

<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>

<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>占位</td>
<td class="foot">内容</td>
</tr>

</table>
</div>

</body>
</html>

css冻结列的效果的更多相关文章

  1. JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题

    前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bo ...

  2. 只用css实现“每列四行，加载完一列后数据自动填充到下一列”的效果

    只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都 ...

  3. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  4. slickgrid ( nsunleo-slickgrid ) 2 修正区域选择不能跨冻结列的问题

    slickgrid( nsunleo-slickgrid )  2 修正区域选择不能跨冻结列的问题 周六的时候,留了个小小的尾巴,区域选择的问题进做到了定位: 问题原因,在slickgrid启动冻结之 ...

  5. 怎么在Microsoft Project中冻结列

    在用Project排项目计划的时候如果在Gantt图中列比较多,左右滚动的时候就会经想像如果能想Excel一样冻结某些列就方便多了,其实在Project中虽然没有冻结列的功能,但通过一些变通方法还是可 ...

  6. html table冻结列

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  7. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  8. JQuery 表格拖动调整列宽效果

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...

  9. EasyUI 冻结列

    一.如果是js绘制的,设置frozenColumn属性就可以,frozenColumn 属性和 columns 属性都是设置列,frozenColumn是设置冻结列 $('#tt').datagrid ...

随机推荐

  1. spring的jdbc

    Spring将替我们完成所有使用JDBC API进行开发的单调乏味的.底层细节处理工作. 操作JDBC时Spring可以帮我们做这些事情: 定义数据库连接参数,打开数据库连接,处理异常,关闭数据库连接 ...

  2. Windows下MySQL 5.7安装记录

    软件下载 环境:Windows 7 旗舰版 64位 MySQL版本:mysql-5.7.3.0-winx64 MySQL下载地址:http://dev.mysql.com/downloads/inst ...

  3. Android 百度地图开发（一）

    在自己的Android项目中增加百度地图的功能. 一 申请API key 在使用百度地图之前,我们必须去申请一个百度地图的API key,申请地址http://lbsyun.baidu.com/api ...

  4. 〖Linux〗Kubuntu设置打开应用时就只在打开时的工作区显示

    有没有遇到一种情况: 在工作区1打开了应用程序Google Chrome: 这个时间感觉它打开速度比较慢,就快捷键切换到工作区2了: 结果这个时候,Google Chrome就直接在工作区2打开,多不 ...

  5. 〖Network〗宿舍配置两路由器，同时访问校园内网和校园外网

    环境: 校园宿舍, 10.x.x.x 和 172.16.x.x~172.31.x.x是校园内网,本科教务系统什么的都在上边 路由器: 路由器1(校园内网):水星MR807 路由器2(拨号上网):TP ...

  6. android手机导入.cer证书文件的方法

    访问很多https协议的网站需要安装证书,手机也可以导入cer文件,你知道么?本文将通过简单的两步告诉你手机安装cer文件的方法. 步骤一:请先将数字证书文件“******.cer”文件复制到SD卡的 ...

  7. 1768:最大子矩阵（NOIP2014初赛最后一题）

    1768:最大子矩阵 总时间限制: 1000ms 内存限制: 65536kB 描述 已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大小至少是1 * 1)子矩阵. 比如 ...

  8. Kettle7.1在window启动报错

    实验环境: window10 x64 kettle7.1  pdi-ce-7.1.0.0-12.zip 错误现象: a java exception has occurred 问题解决: 运行调试工具 ...

  9. Win10激活KMS2.0

    目前,发现的唯一能激活Window10的纯净版. 下载地址: http://pan.baidu.com/s/1bpvMRBx 好孩子看不见: http://pan.baidu.com/s/1bo8xP ...

  10. Mac OS使用技巧十九：Safari碉堡功能之二查看网页源代码

         由于大三下的时候选修了搜索技术.了解了网络上搜索引擎和网络爬虫的信息扒取的一些东西,后来我们做了一个比較水的东西.就是仅仅扒取了几家较大的下载站点几十个软件的评分下载量等信息,当用户输入一个 ...