table左边固定-底部横向滚动条-demo
图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>固定标题列、标题头table</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
border: #000 solid 0px;
}
table td {
border: 1px solid #000;
height: 25px;
text-align: center;
border-left: 0px;
}
table th {
background: #edd3d4;
color: #a10333;
border: #000 solid 1px;
white-space: nowrap;
height: 21px;
border-top: 0px;
border-left: 0px;
}
.t_left {
width: 30%;
height: auto;
float: left;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
/*t_r_content和cl_freeze高度相差20px， 高度为外观显示高度，可根据情况调整*/
.t_r_content {
width: 100%;
height: 220px;
background: #fff;
overflow: auto;
}
.cl_freeze {
height: 200px;
overflow: hidden;
width: 100%;
}
/* width 调整左边标题列宽度（左侧外观显示宽度）; 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/
/* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */
/* 如果显示不正常，调整 t_r的width 使其和t_left的width之和小于100%；等于100%时会有问题*/
.t_r {
width: 69.5%;
height: auto;
float: left;
border-top: 1px solid #000;
border-right: #000 solid 1px;
}
.t_r table {
width: 1700px;
}
.t_r_title {
width: 1720px;
}
/*宽度比 t_r table 大20px （至少大20，小了滚动条滑到右侧显示有问题）*/
.t_r_t {
width: 100%;
overflow: hidden;
}
.bordertop {
border-top: 0px;
}
</style>
<script>
function aa() {
var a = document.getElementById("t_r_content").scrollTop;
var b = document.getElementById("t_r_content").scrollLeft;
document.getElementById("cl_freeze").scrollTop = a;
document.getElementById("t_r_t").scrollLeft = b;
}
</script>
</head>
<body>
<div style="width:100%">
<div class="t_left">
<div style="width:100%;">
<table>
<tr>
<th style="width:40%">zhanghao</th>
<th style="width:60%">mima</th>
</tr>
</table>
</div>
<div class="cl_freeze" id="cl_freeze">
<table>
<tr>
<td style="width:40%" class="bordertop">1</td>
<td style="width:60%" class="bordertop">1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>20</td>
</tr>
</table>
</div>
</div>
<div class="t_r">
<div class="t_r_t" id="t_r_t">
<div class="t_r_title">
<table>
<tr>
<th width="10%">A</th>
<th width="20%">B</th>
<th width="10%">C</th>
<th width="20%">D</th>
<th width="20%">E</th>
<th width="20%">F</th>
</tr>
</table>
</div>
</div>
<div class="t_r_content" id="t_r_content" onscroll="aa()">
<table>
<tr>
<td width="10%" class="bordertop">1</td>
<td width="20%" class="bordertop">1</td>
<td width="10%" class="bordertop">1</td>
<td width="20%" class="bordertop">1</td>
<td width="20%" class="bordertop">1</td>
<td width="20%" class="bordertop">1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
table左边固定-底部横向滚动条-demo的更多相关文章
- table左边固定-底部横向滚动条
是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表 ...
- H5禁止底部横向滚动条，使一个元素居中
1.禁止底部横向滚动条 选择元素设置样式 { overflow-y:auto; overflow-x:hidden } 2.元素居中 { margin-left:auto ; margin-right ...
- flex布局下el-table横向滚动条失效
如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...
- table 上下左右 4根线的写法 :before :after 他们就能把td里面右下的那颗线给盖上 还有body和header横向滚动的联动 || 不能把body套在header上是为了上header表头固定 || 还有表头header的右侧overflow-y 是否出现滚动条的位置 记得有一个$nextTick 要不然会获取不到高度 高度就为0了 || 横向滚动条纵向滚动条
table 上下左右 4根线的写法 <!--* @description 重点查核人员表!--><template> <div class="keyChecke ...
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...
- DataTables固定表格宽度（设置横向滚动条）
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
- html table表格列数太多添加横向滚动条
HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
随机推荐
- 关于php/js抓取/采集
前段时间用php的一个插件(phpQuery+queryList)写了采集某个博客的一些博文,然后用linux的自动运行跑,感觉还不错. 但在很久之前就已经听说了另外一个插件,可以很好的进行采集,叫做 ...
- HTML5 canvas自制画板
找到一个画板的插件,很好用,点击下载 ,页面很简单,但是呢,貌似不适用于手机端,,,
- 树莓派3B 安装gcc和g++
转:https://blog.csdn.net/zhuming3834/article/details/81946707 安装 如果不是root 用户,请自行加上sudo apt-get instal ...
- Python（三）enumerate函数
原文链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143177932 ...
- 微信-获取openid
第一步 首先把微信的支付流程与相关的文档熟悉一遍,具体的支付逻辑是怎么实现的,心里要有一定的路数,开发的时候一边看文档,一边写,再一边调试这是最好的选择,首先阅读微信开发文档,因为我们这次是做公众号支 ...
- Laravel Vuejs 实战：开发知乎 （2）用户注册
1.本节需要发送验证邮件 2.教程使用SendCloud发送邮件 [我使用的是mailtrap] 3. composer require laravel/ui 安装完成后 php artisan ui ...
- SUDO_EDITOR
目录 SUDO_EDITOR 参考 SUDO_EDITOR SUDO_EDITOR
- Java笔记 02-LinkedList
介绍:List 接口的链接列表实现.实现所有可选的列表操作,并且允许所有元素(包括 null).除了实现 List 接口外,LinkedList 类还为在列表的开头及结尾 get.remove 和 i ...
- 【代码学习】PYTHON 文件I/O
一.文件的打开和关闭 open(文件名,访问模式) cloese() 模式 描述 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打开一个文件用于只读.文件指针 ...
- left join 、right join 和inner join之间的区别
SQL的left join .right join 和inner join之间的区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) ...