DHTML,Table标签,固定行头,固定列头列

最新推荐文章于 2023-05-11 14:47:05 发布
最新推荐文章于 2023-05-11 14:47:05 发布
阅读量1.7k 收藏 1
点赞数
文章标签： table 浏览器 class 测试 div ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aikesi117/article/details/5009521
版权

注：以下演示子在 ie 下测试成功，dhtml 的

<html>

<head>

<!--固定行列头，曲滨200608-->

<style type="text/css">

<!--

body,table, td, a {

font:9pt;

}

 

/*重点：固定行头样式*/

.scrollRowThead

{

     position: relative;

     left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);

     z-index:0;

}

 

/*重点：固定表头样式*/

.scrollColThead {

     position: relative;

     top: expression(this.parentElement.parentElement.parentElement.scrollTop);

     z-index:2;

}

 

/*行列交叉的地方*/

.scrollCR {

     z-index:3;

}

 

/*div外框*/

.scrollDiv {

height:200px;

clear: both;

border: 1px solid #EEEEEE;

OVERFLOW: scroll;

width: 100%;

}

 

/*行头居中*/

.scrollColThead td,.scrollColThead th

{

     text-align: center ;

}

 

 

/*行头列头背景*/

.scrollRowThead,.scrollColThead td,.scrollColThead th

{

background-color:EEEEEE;

}

 

 

 

 

/*表格的线*/

.scrolltable

{

border-bottom:1px solid #CCCCCC;

border-right:1px solid #CCCCCC;

}

/*单元格的线等*/

.scrolltable td,.scrollTable th

{

     border-left: 1px solid #CCCCCC;

     border-top: 1px solid #CCCCCC;

     padding: 5px;

}

 

-->

</style>

<script>

    

</script>

</head><body >

本演示子兼容ie 浏览器，测试日期2006 年,其他浏览器在div onscroll 事件用js实现和本列相同的样式应该也可实现

<div id="scrollDiv" class="scrollDiv" >

<table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable">

 

<tr class="scrollColThead"  >

<th class="scrollRowThead scrollCR"  >&nbsp;</th>

<th colspan="2">列头</th>

<th colspan="10">列头</th>

</tr>

<tr class="scrollColThead"  >

<th class="scrollRowThead scrollCR"  >h1</th>

<th >h2</th>

<th >h3</th>

<th >h4</th>

<th >h5</th>

<th >565656</th>

<th >565656</th>

<th >5656565656</th>

<th >56565656</th>

<th >56565656</th>

<th >56565656</th>

<th >56565656</th>

<th >56566666666666666666666666666666666666666666666666666666666666666666565656</th>

</tr>

<tr>

<td class="scrollRowThead"  ><input type="checkbox" name="checkbox" value="checkbox">

  a</td>

<td>单元格2</td>

<td>单元格3</td>

<td>单元格4</td>

<td>单元格5</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td class="scrollRowThead"  ><input type="checkbox" name="checkbox2" value="checkbox">

  b</td>

<td>单元格2</td>

<td>单元格3</td>

<td>单元格4</td>

<td>单元格5</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td nowrap class="scrollRowThead"  ><input type="checkbox" name="checkbox3" value="checkbox">

  1</td>

<td nowrap>单元格2</td>

<td nowrap>单元格3</td>

<td nowrap>单元格4</td>

<td nowrap>单元格5</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

</tr>

<tr>

<td class="scrollRowThead"  ><input type="checkbox" name="checkbox4" value="checkbox">

  2</td>

<td>单元格2</td>

<td>单元格3</td>

<td>单元格4</td>

<td>单元格5</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td class="scrollRowThead"  ><input type="checkbox" name="checkbox5" value="checkbox">

  3</td>

<td>单元格2</td>

<td>单元格3</td>

<td>单元格4</td>

<td>单元格5</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td class="scrollRowThead"  ><input type="checkbox" name="checkbox6" value="checkbox">

  4</td>

<td>单元格2</td>

<td>单元格3</td>

<td>单元格4</td>

<td>单元格5</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td class="scrollRowThead" ><input type="checkbox" name="checkbox7" value="checkbox">

  5</td>

<td>单元格2</td>

<td>单元格3</td>

<td>单元格4</td>

<td>单元格5</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

</div>

 

</body></html>

aikesi117
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DHTMLX-Grid
weixin_30654419的博客
11-30 792
DHTMLX - Grid 介绍 dhtmlxGrid是一个灵活的、易于使用的JavaScript网格组件,可以创建DHTML表与丰富的编辑- sensing,固定的多行页眉和页脚,可调整大小的、可拖动的列，内置过滤、搜索和分组功能。dhtmlxGrid拥有先进的拖放、动态加载，可定制的视图中，一组预定义的单元格编辑器和许多其他的功能，使它成为一个平台为开发者提供援助。...
gantt任务图标左侧文章添加
qq_37517100的博客
04-24 320
项目场景： gantt任务图标左侧文章添加 问题描述 gantt任务图标左侧文章添加 解决方案： 根据条件判断添加文字 // 右侧文字 gantt.templates.rightside_text = function (start, end, task) { let type = { task: gantt.config.types.task === "task" ? "Task" : "", project: gantt.config.types.p
前端甘特图组件开发（一）
PorkCanteen的博客
11-28 7162
工作中需要使用甘特图组件展示数据，故考虑自主开发一款基于Angular的甘特图组件以满足业务的需求。基本包含以下几项功能：① 根据数据自动渲染进度图；② 支持树形表格数据展示；③ 支持多层时间轴自定义；④ 支持数据增删改查。其余功能将在后续持续拓展完善。
Dhtmlx Gantt 常用方法及基本配置合集(持续更新)
热门推荐
weixin_46221897的博客
05-13 1万+
甘特图基本配置 甘特图扩展功能 gantt.plugins({ tooltip: true, quick_info: true,// 快速信息框 // multiselect: true,// 激活多任务选择 }); 甘特图任务悬浮框位置 gantt.config.tooltip_offset_x = 10; gantt.config.tooltip_offset_y = 30; 激活列表展开（折叠）功能 gantt.config.open_
DHTML常用标签的使用说明，非常详细
05-13
DHTML常用标签的使用说明，非常详细。DHTML常用标签的使用说明，非常详细。DHTML常用标签的使用说明，非常详细。DHTML常用标签的使用说明，非常详细DHTML常用标签的使用说明，非常详细DHTML常用标签的使用说明，非常...
DHTML开发参考手册
04-18
DHTML开发参考手册，包含DHTML HTML CSS滤镜等标签属性说明，可以用作开发中的参考查阅
DHTML.rar_DHTML
09-24
在DHTML中，HTML标签被用来创建动态内容的基础框架。通过在HTML代码中添加事件属性，如`onclick`或`onmouseover`，可以使得网页元素与用户的交互成为可能。 2. **CSS样式** CSS用于控制网页的布局和样式。在DHTML...
dhtml.rar_DHTML
09-23
DHTML的核心在于不依赖服务器刷新整个页面，而是通过客户端的脚本语言对网页的部分内容进行改变，提供更丰富的用户体验。 1. **JavaScript**：JavaScript是DHTML的关键部分，它是一种轻量级的解释性编程语言，主要...
DHTML.rar_DHTML_html
09-19
**DHTML中文参考手册概述** DHTML（Dynamic HTML）是一种技术集合，用于增强网页的交互性和动态性。它结合了HTML、CSS（层叠样式表）、JavaScript和DOM（文档对象模型），使得网页不仅能够静态展示内容，还能实现...
dhtmlxgrid 强大的表格控件
10-09
优美的表格化数据显示，用户可用鼠标拖动方便地改变各列的宽度 支持客户端表格排序，只需单击要排序列的表头。并且支持设置列的数据类型（数字、字符串、日期），按类型排序 页面所有数据操作全部采用Ajax技术后台处理，整个页面只会加载一次，所有操作均仅更新页面相应区域，页面不会整体刷新。
table表格固定行和列
05-11
table表格固定行和列。。。。。。。。。。。。。。。。。。。。。。。。。。。。
前端页面Table CSS实现固定表头表首行和固定列拖动固定
小熊猫
05-11 3071
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。
JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）
weixin_30819085的博客
09-30 1416
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-...
实现表格的固定列和表头的效果
zlear小窝
04-30 2144
前言 基于表格横向有超多数据的需求，渲染量比较大，使用el-table的固定列功能会出现2～3秒的卡顿，所以自己实现了一个固定头+列的表格效果 脱离element-ui又借鉴element-ui，实现类似el-table的固定列和表头的效果 1-1固定，1-2只支持上下滑动，2-1只支持左右滑动，2-2上下、左右均可滑动 其中下图中1-2和2-1两part的滑动事件应用了el-table的mou...
dhtml table设置行高
最新发布
12-15
<title>DHTML Table Row Height table, th, td { border: 1px solid black; border-collapse: collapse; } function setRowHeight() { var table = document.getElementById("myTable"); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值