table固定前两列和最后一列，其他滑动显示
网上搜的基本都是4个table做的，数据处理比较麻烦，写了个一个table的，此示例只固定了前两列和最后一列，和网上的不太一样。
网上搜的基本都是4个table做的，数据处理比较麻烦，写了个一个table的，此示例只固定了前两列和最后一列，和网上的不太一样。
网上搜的基本都是4个table做的，数据处理比较麻烦，写了个一个table的，此示例只固定了前两列和最后一列，和网上的不太一样。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
} #table {
position: relative;
} #table th:first-child, #table th:nth-child(2), #table th:last-child, #table tr > td:first-child, #table tr > td:nth-child(2), #table tr > td:last-child {
background-color: #ff0000;
position: fixed;
z-index: 2;
}
</style>
<script src="../Scripts/jq/jquery-2.1.4/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function () {
if ($("#table>thead>tr>th").length > 5) {
//设置固定列的th和td的with都为最长的那个td的长度
var tdWith = 0;
$("#table tr>td:first-child").each(function (index, item) {
if ($(item).width() > tdWith) {
tdWith = $(item).width();
}
});
$("#table th:first-child,#table tr>td:first-child").width(tdWith);
tdWith = 0;
$("#table th:nth-child(2),#table tr>td:nth-child(2)").each(function (index, item) {
if ($(item).width() > tdWith) {
tdWith = $(item).width();
}
});
$("#table th:nth-child(2),#table tr>td:nth-child(2)").width(tdWith);
tdWith = 0;
$("#table th:last-child,#table tr>td:last-child").each(function (index, item) {
if ($(item).width() > tdWith) {
tdWith = $(item).width();
}
});
$("#table th:last-child,#table tr>td:last-child").width(tdWith);
//设置外面div的with
var div_abroadWith = 0;
$("#table>tbody>tr:first-child>td").each(function (index, item) {
if (index < 5) {
div_abroadWith += $(item).width();
} else {
return false;
}
});
//设置table的with
var tableWith = 0;
$("#table>tbody>tr:first-child>td").each(function (index, item) {
tableWith += $(item).width();
});
$("#table").width(tableWith);
div_abroadWith += $("#table th:last-child").width();
$("#div_abroad").width(div_abroadWith);
//设置固定列的偏移量
$("#table th:first-child,tr>td:first-child").css("left", $("#div_abroad").offset().left);
$("#table th:nth-child(2),tr>td:nth-child(2)").css("left", $("#div_abroad").offset().left + $("#table td:first-child").width());
$("#table th:last-child,tr>td:last-child").css("left", $("#div_abroad").offset().left + $("#div_abroad").width() - $("#table td:last-child").width()); //因为第一，二和最后一个设置定位了，所以table里缺少了3列造成滚动条不足，所以要为table补充3列，补充位置有要求，必须在第二列的后面补上第一，第二列。这两列的宽度和原先的保持一致
//最后一列的上面要补充一列，宽度和最后一列保持一致。
var $td = $("<th style='width:" + $("#table th:first-child").width().toString() + "px'></th><th style='width:" + $("#table th:nth-child(2)").width().toString() + "px'></th>");
$("#table th").eq(2).before($td);
$td = "<td style='width:" + $("#table th:first-child").width().toString() + "px'></td><td style='width:" + $("#table th:nth-child(2)").width().toString() + "px'></td>";
$("#table tbody>tr").each(function (index, item) {
$(item).find("td").eq(2).before($($td));
});
$td = $("<td style='width:" + $("#table th:last-child").width().toString() + "px'></td>");
$("#table tbody>tr>td:last-child").before($td);
}
});
</script>
</head>
<body>
<div id="div_abroad" style="overflow-x: auto;width:300px;margin:50px auto;background:#4cff00">
<table id="table" style="border-collapse: collapse" borderColor=#000000 height=40 cellPadding=1 border=1>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
<th>列6</th>
<th>列7</th>
<th>列8</th>
<th>列9</th>
<th>列10</th>
</tr>
</thead>
<tbody>
<tr>
<td>111111111111111111111111</td>
<td>222222222</td>
<td>33333333</td>
<td>44444</td>
<td>555555555555555555555</td>
<td>66666666</td>
<td>777777</td>
<td>88888888</td>
<td>9999999</td>
<td>10959</td>
</tr>
<tr>
<td>111111111111111</td>
<td>22222222222</td>
<td>333333</td>
<td>444444444444</td>
<td>5555555555555555</td>
<td>666666666666</td>
<td>777777</td>
<td>88888888888888888</td>
<td>999999999999</td>
<td>109555559</td>
</tr>
<tr>
<td>111111111111111</td>
<td>222222222222222222222</td>
<td>333333333333</td>
<td>4444444</td>
<td>555555555555555555555</td>
<td>66666666</td>
<td>777777</td>
<td>88888888</td>
<td>9999999</td>
<td>109555999995559</td>
</tr>
<tr>
<td>111111111111111</td>
<td>22222222222</td>
<td>333333eeee33</td>
<td>44444</td>
<td>555555555555555555555</td>
<td>66666666</td>
<td>777wwww777</td>
<td>88888eee888</td>
<td>9999ww999</td>
<td>1095555559</td>
</tr>
<tr>
<td>111111111111111</td>
<td>22222222222222222222222222</td>
<td>333ww33333</td>
<td>44sss444</td>
<td>555555555555555555555</td>
<td>66666666</td>
<td>777777</td>
<td>88888</td>
<td>9999</td>
<td>10559</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
有时间在写个固定表头的，今天下班回家吃饭。
转载注明
http://www.cnblogs.com/zszs/p/6297722.html
table固定前两列和最后一列，其他滑动显示的更多相关文章
- bootstrap table 怎么实现前两列固定冻结？
$("#Table").bootstrapTable('destroy').bootstrapTable({ pagination: true,//分页 minimumCountC ...
- HTML table固定表头
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...
- 《Writing Idiomatic Python》前两部分的中文翻译
汇总了一下这本小书前两部分的内容: 翻译<Writing Idiomatic Python>(一):if语句.for循环 翻译<Writing Idiomatic Python> ...
- SQL-59 按照salary的累计和running_total，其中running_total为前两个员工的salary累计和，其他以此类推。
题目描述 按照salary的累计和running_total,其中running_total为前两个员工的salary累计和,其他以此类推. 具体结果如下Demo展示..CREATE TABLE `s ...
- SQL SERVER 下：1、递归查询父分类下的各个子分类。 2、查询每个商品分类中最贵的前两个商品SQL
1.递归查询父分类下的各个子分类.表设计: SQL: --CTE 语句(适用于MSSQL2005以后版本) with cte_testNavi(Id,Name,Pid ) as ( --这是查询语句 ...
- Week08_day01 (Hive开窗函数 row_number()的使用 （求出所有薪水前两名的部门）)
数据准备: 7369,SMITH,CLERK,7902,1980-12-17,800,null,20 7499,ALLEN,SALESMAN,7698,1981-02-20,1600,300,30 7 ...
- layui静态表格固定td宽度,table固定td宽度
正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...
- mysql两表合并,对一列数据进行处理
加班一时爽,一直加班~一直爽~ 欢迎收看http://www.996.icu/ 今天弄了下MySQL中两表合并的并且要处理一列数据,这列数据原来都是小写字母,处理时将这列数据改成驼峰命名的~~ 基本 ...
- sqlserver -- 学习笔记（七）获取同组数据的前两条记录
不啰嗦,直接上图,大概实现效果如下: 有上面这样一份数据,将他们按照userAccount和submitTime进行分组,然后提前每组数据的前两条记录 提取后数据如下: 实现的SQL如下: selec ...
随机推荐
- JAVA中SSL证书认证通讯
JAVA中SSL证书认证通讯 SSL通讯服务端 /******************************************************************** * 项目名称 ...
- 【poj解题】1028
stack的应用 #include<iostream> #include<stack> #include<stdio.h> #include<stdlib.h ...
- MySQL 导出命令
mysqldump --no-defaults -u root -p dbname > c:\www\test.sql windows 下使用.
- Flash CS 自定义组件
2012年的时候,做了一些研究,可以后来没有去整理,没有去用到项目里头,现在把这些东西都放出来纪念一下,也给有需要的人作为参考. 基本知识: Flash使用基本知识与ActionScript 3.0的 ...
- jquery中:input和input的区别分析
:input表示选择表单中的input,select,textarea,button元素,input仅仅选择input元素. <html> <head> <style&g ...
- IOS开发中重写init方法使用需谨慎
IOS开发中重写init方法使用需谨慎 今天在写一个小软件的时候出现一点问题,这个软件的功能是搜索全国学校,首页就是搜索输入框,在框中输入完要查询的学校所在省份,点击buttom后就会跳转到对应的视图 ...
- php中使用mysql_fetch_array输出数组至页面中展示
用的是CI框架,很好的MVC结构 在Model层 public function showProteinCategory(){ $sql = "SELECT DISTINCT protein ...
- 获取手机wifi下的网络地址
#import "getIPhoneIP.h" #import <ifaddrs.h> #import <arpa/inet.h> @implementat ...
- PHP的Cookie、Session和跟Laravel相关的几点了解
这两天通过对Cookie和Session的查找和了解,网上关于它们两个的基础知识点都是差不多的,也收藏了几篇不错的博客,同时自己做了些实验后,有了以下几点了解: 1.setcookie 这里有三个地方 ...
- Xcode--Alcatraz来管理Xcode插件
简介 Alcatraz是一个帮你管理Xcode插件.模版以及颜色配置的工具.它可以直接集成到Xcode的图形界面中,让你感觉就像在使用Xcode自带的功能一样. 安装和删除 使用如下的命令行来安装Al ...