如何定住表格的第一列和第一行
如何定住表格的第一列和第一行 #页面布局
如何将表格的第一列定住
将表格的第一列定住,表格的右侧滚动
方法一
<style>.outer {position:relative;}.inner {margin-left: 第一列的宽度;overflow: hidden;overflow-x: auto;}td:first-child {position: absolute;left: 0;width: 第一列的宽度;}td {overflow: hidden;white-space: nowrap;}
</style>
<div class="outer" ><div class="inner" ><table><tr><td>我是定住的单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr><tr><td>我是定住的单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr><tr><td>我是定住的单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr></table></div>
</div>
思想
将第一列绝对定位在outer上,限制inner的宽度来出现滚动条
优点
仅使用css来定位
缺点
当第一列的单元格高度比同一行的其他单元格高度高的时候 第一列的单元格由于已经脱离了表格,表格不能再根据一系列的高度来撑开行高。所以每个单元格都只能设置成一行,不能换行。
方法二
<style>table {border-collapse: collapse;border-spacing: 0;}.outer {position:relative;width: 最大宽度(一般为100%);}.inner {margin-left: 第一列的宽度;overflow: hidden;overflow-x: auto;}.base-table {position: absolute;left: 0;top: 0;}.base-table td{width: 第一列的宽度;}.target-table td{min-width: 80px;}
</style>
<div class="outer" ><div class="inner" ><table class="base-table" ><tr><td>我是定住的单元格1</td></tr><tr><td>我是定住的单元格1</td></tr><tr><td>我是定住的单元格1</td></tr></table><table class="target-table" ><tr><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr><tr><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr><tr><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr></table></div>
</div>
<script>$(function(){var baseHeightArray = []; $('.base-table tr').each(function (index, el) {baseHeightArray.push($(el).find('td').height());});$('.target-table tr').each(function (index, el) {$(el).find('td').height(baseHeightArray[index]);});})
</script>
思想
将一个表格拆成两个表格,通过base获取表格的高度来分别渲染target表格的高度,
(如果右边比较高则相反);
优点
不需要复杂的计算,是第一种的升级版,需要先要确定哪个表格高度比较高,适用于滚target表格是简单数据或单选、复选框的集合
缺点
不适用于两边都高度都不确定的情况,需要两个表格结构复杂了DOM结构,需要两次循环
方法三
<style>table {border-collapse: collapse;border-spacing: 0;}td {border: 1px solid #ddd;padding: 8px 5px;}.outer {position:relative;width: 300px;}.inner {margin-left: 90px;overflow: hidden;overflow-x: auto;}.base-table {position: absolute;left: 0;top: 0;}.base-table td{width: 80px;}.target-table td{min-width: 80px;}
</style>
<div class="outer" ><div class="inner" ><table class="base-table" ><tr><td>我是定住的单元格1</td></tr><tr><td>我是定住的单元格1</td></tr><tr><td>我是定住的单元格1</td></tr></table><table class="target-table" ><tr><td>单元格2单元格2单元格2单元格2单元格2单元格2</td><td>单元格3</td><td>单元格4</td></tr><tr><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr><tr><td>单元格2</td><td>单元格3单元格3单元格3单元格3</td><td>单元格4</td></tr></table></div>
</div>
<script>$(function(){var baseHeightArray = [];var baseTable = $('.base-table');var targetTable = $('.target-table');var targetTr = targetTable.find('tr');baseTable.find('tr').each(function (index, el) {var baseH = $(el).find('td').height();var targetH = targetTr.eq(index).height();var h = baseH > targetH ? baseH : targetH;baseHeightArray.push(h);});baseTable.find('tr').each(function(index, el){$(el).find('td').height(baseHeightArray[index]);});targetTr.each(function(index, el){$(el).find('td').height(baseHeightArray[index]);});})
</script>
思想
其实本方法就是第二种方法的升级版,多了一个相对于两边单元格高度的计算
优点
不需要确定两边单元格的高度,想怎么变就怎么变,爽
缺点
计算多
如何将表格的第一行定住
未完待续…
如何将表格的第一行和第一列同时定住
未完待续…
如何定住表格的第一列和第一行相关推荐
- CSS中给表格的第一列及最后一列设置不同的样式
<!--设置表格的第一列样式--> table tr td:first-child{样式代码.... } <!--设置表格的最后一列样式--> table tr td:last ...
- 合并表格中同一列中相同的内容
2019独角兽企业重金招聘Python工程师标准>>> <script type="text/javascript"> $(function(){_w ...
- Vue合并el-table第一列相同数据
业务需求: 需要将el-table表格第一列相同的内容进行合并. 解决办法: el-table中使用 :span-method="objectSpanMethod"方法 vue标签 ...
- POI word 合并表格的行和列,merge table row and colume,亲测有效
需求描述: 对已经生成的word进行处理,要对表格中的行.列进行合并. 参考:https://stackoverflow.com/questions/15984896/how-to-merge-cel ...
- excel如何获取括号内字符以及excel如何根据第一列是否相等判断是否累加第二列
今天分享两个excel公式小运用. 1.如何获取括号内字符.譬如 思路:Mid(withintext,start_num,lenth)函数 用find(look_char,withintext,sta ...
- vue移动端表格,超出横向滚动,固定第一列
效果图 html结构 表格数据对应渲染功能实现思路:其实看代码就能了解了,就很简单的用循环数组,然后把数组中的每一项对应放在一个位置就行了.这样循环几个,就有几列数据,后台传过来的数据就分成两个,一个 ...
- 三线表是什么?R语言使用table1包绘制(生成)三线表、使用单变量分列构建三线表、通过topclass参数自定义三线表表格的显示形式(显示为类似斑马线、并将所有列居中,包括包含行标签的第一列)
三线表是什么?R语言使用table1包绘制(生成)三线表.使用单变量分列构建三线表.通过topclass参数自定义三线表表格的显示形式(显示为类似斑马线.并将所有列居中,包括包含行标签的第一列) 目录
- python excel取列_python取excel表格第一列数据-python操作excel,使用xlrd模块,获取某一列数据的......
怎样用python,读取excel中的一列数据 Python对Excel的读写主要有xlrd.copyxlwt.xlutils.openpyxl.xlsxwriter几种. 1.xlrd主要用来读百取 ...
- python利用表格中的某一个列_python取excel表格第一列数据?python操作excel,使用xlrd模块,获取某一列数据的语句为...
用Python修改excel中一列数据 可以使用pandas库,先读取excel文件,然后使用pandas库来修改一列,然后写入文件即可. 怎样用python,读取excel中的一列数据 sheet. ...
- 固定表头和第一列、内容可滚动的table表格
本文首发我的简书 鉴于之前有几个项目都用到了第一行第一列固定不动的表格,所以整理了一下制作这种表格的方法. 基本原理是把表格分为四个部分,左上角是固定不动的,第一行和第一列是半固定的,只能左右 ...
最新文章
- archlinux详细安装步骤_Archlinux 安装教程图文详解
- 产品问答 | 作为项目负责人,怎么提升成员工作斗志?
- pytorch dataset dataloader_PyTorch(五)——数据的加载和预处理
- Web 高效开发必备的 PHP 框架
- PowerDesigner反向工程 mysql
- Numpy random生成不重复的随机数
- 年终总结做得好,升职加薪少不了,仅需1个技巧,10分钟完成
- 使用XmlWriter写XML文件
- 该网站可能含有恶意软件,有可能会危害您的电脑 清除办法
- windows server 系统SERVER服务消失无法共享
- 阿里云中标“金关工程二期”大数据云项目,总金额8568万!(含标单)
- python中怎么把每一个字符用、隔开_python 实现将list转成字符串,中间用空格隔开...
- scara 机器人三四轴机械结构
- 关于留言簿的补充说明
- “美亚杯”第三届中国电子数据取证大赛答案解析(个人赛)
- 在Java中计算各位数字立方和
- 微软飞行模拟服务器,《微软飞行模拟2020》已推出首个公共SDK
- 旺财年的汪式编程人生
- 16年老股民,转入外汇市场,炒外汇为什么要用EA?
- java基础练习-超市购物系统