固定表头和列

最新推荐文章于 2021-07-17 21:09:53 发布
最新推荐文章于 2021-07-17 21:09:53 发布
阅读量390 收藏
点赞数

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>利用css 固定表头和列 （只适用于IE浏览器）</title>
    <style>
        .FixedTitleRow
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            z-index: 10;
            background-color: #E6ECF0;
        }
       
        .FixedTitleColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.scrollLeft);
        }
       
        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            background-color: #E6ECF0;
        }
    </style>
</head>
<body>
   <div id="scrollDiv" style="width: 400px; overflow: auto; cursor: default; display: inline;  position: absolute; height: 200px;">
        <table id='accountTable' height='230' cellpadding='0' cellspacing='0' border='1'
            style='table-layout: auto' bordercolor='lightgrey'>
            <tbody>
                <tr class="FixedTitleRow">
                    <td class="FixedTitleColumn">
                        ID0</td>
                    <td class="FixedTitleColumn">
                        CK0</td>
                    <td class="FixedTitleColumn">
                        Code0</td>
                    <td class="FixedTitleColumn">
                        Descirption0</td>
                    <td class="FixedTitleColumn">
                        TOL0</td>
                    <td>
                        XS0</td>
                    <td >
                        SS0</td>
                    <td>
                        MS0</td>
                    <td>
                        DS0</td>
                    <td>
                        BS0</td>
                    <td>
                        XL0</td>
                    <td>
                        ML0</td>
                    <td>
                        DL0</td>
                    <td>
                        EM0</td>
                    <td>
                        BM0</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        1111</td>
                    <td class="FixedDataColumn">
                        This is Test</td>
                    <td class="FixedDataColumn">
                        1</td>
                    <td>
                        001</td>
                    <td>
                        002</td>
                    <td>
                        003</td>
                    <td>
                        004</td>
                    <td>
                        005</td>
                    <td>
                        006</td>
                    <td>
                        007</td>
                    <td>
                        008</td>
                    <td>
                        009</td>
                    <td>
                        010</td>
                </tr>
          <tbody>
        </table>
</div>
</body>

<html>

XUXU_dragon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于jquery的固定表头和列头的代码
10-28
2. 使用`clone(true)`方法创建原始表格的深拷贝，分别用于表头、固定列和数据部分。 3. 将这些拷贝分别插入到对应的辅助容器中，并调整它们的CSS属性，如高度、宽度和位置，以实现固定效果。 4. 通过设置`thead`的...
GridView 固定表头和列
11-16
它提供了丰富的功能，如排序、分页、筛选等，而“固定表头和列”则是提高用户体验的一个重要特性。在用户滚动页面时，保持表头和部分列始终可见，能够帮助用户更好地理解和跟踪数据。 实现GridView固定表头和列，...
IE,表头固定
weixin_34226182的博客
02-11 134
<html> <head> <title>表头固定</title> <style type="text/css"> /*表头样式*/ .scll { position: relative; top: expression(this.offsetParent.scrollTop); backg...
table表头固定 ,兼容IE.Firefox,google,360等等
蓝缘
04-10 6492
固定表头 body{ overflow:hidden;}/*让body不出现滚动条*/ table { background-color: #FFFFFF; border-collapse: collapse; border-left: 1px solid #000; border-spacing: 1px; border-top: 1px solid #
css 实现的TABLE 固定行列(IE)
f0rwin的专栏
11-21 4727
html>head> style type="text/css"> body,table, td, a { font:9pt; } /*重点：固定行头样式*/.scrollRowThead {     position: relative;      left: expression(thi
table固定表头、固定列
RRRRRDong的博客
07-17 8333
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。 使用position:sticky来固定表头 html: <div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
html table 固定表头和列
09-21
"html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`<table>`元素用于创建表格，`<tr>`定义表格行，`<th>`定义表头...
CSS 固定表头和列
05-27
在处理大型数据表格时，为了提高用户体验，我们常常需要实现固定表头和列的效果，这样用户在滚动页面时，表头和列标签始终保持可见，方便用户定位数据。本教程将详细介绍如何使用CSS实现这一功能。 首先，我们需要...
css固定表头和列.html
01-11
css固定table表头和列，亲测可用
纯 CSS 的固定表头和首列
Triumphal
06-13 2396
将以下代码保存为网页文件后用非 IE 浏览器打开。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
GridView固定表头和首列
matriculate的专栏
06-21 1074
GridView固定表头和首列当GridVIew中要显示的数据非常多的时候，用户常需要开发人员固定表头或是首列，以保证在拖动滚动条的时候，可以清楚得了解到每一列或行的内容。 借助于CSS的功能，可以将GridView打造成这样的表格：首先，要把GridView放在一个容器中，然后在页面中添加如下CSS：.fixedheader { position:relative ; t
固定表头和第一列表格的实现
LZUGIS
06-01 2271
概述 在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表格的表头和第一列固定，并且出现双向滚动条。本文就就给大家介绍一种通过css和两行js简单实现。 效果 实现思路 1.区域划分 如下图，将整个表格分为四个区域：1、左上区域需要单独出来，因为此区域不参与滚动；2、上部表头，需要固定在顶部并且参与横向滚动；3、左边表头，需要滚动并且参与竖...
固定（锁定）GridView标题行（表头）
热门推荐
知行合一，学以致用！
12-13 1万+
ASP.NET前台代码： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Freezing.aspx.cs" Inherits="Freezing" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="serv...
js 固定表头和列
最新发布
05-24
因此，建议使用 JavaScript 来实现固定表头和列的效果。以下是一种实现方式： 1. 获取表格元素和表头元素 ```javascript var table = document.getElementById("myTable"); var header = table....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值