css固定表头和列

最新推荐文章于 2023-02-16 16:51:09 发布
最新推荐文章于 2023-02-16 16:51:09 发布
阅读量423 收藏
点赞数
文章标签： css class table div

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>固定表头和列</title>
    <style>
        .FixedTitleRow
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            z-index: 10;
            background-color: #E6ECF0;
        }
.FixedTitle11
        {
            position: relative;
            right: expression(this.offsetParent.scrollright);
             z-index: 4;
         
        }
       
        .FixedTitleColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.scrollLeft);
        }
       
        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.scrollLeft);
            background-color: #E6ECF0;
        }
    </style>
</head>
<body>
   <div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: block;
        position: absolute; height: 200px;">
        <table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0'
            style='table-layout: auto' bordercolor='lightgrey'>
          
                <tr class="FixedTitleRow">
                    <td class="FixedTitleColumn">1</td>
                    <td class="FixedTitleColumn">2</td>
                    <td class="FixedTitleColumn">3</td>
                    <td class="FixedTitleColumn">4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
                <tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
                <tr  class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
               <tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
              <tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
<tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
<tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
<tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
<tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
<tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
<tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
<tr class="FixedTitle11">
                    <td class="FixedDataColumn">1</td>
                    <td class="FixedDataColumn">2</td>
                    <td class="FixedDataColumn">3</td>
                    <td class="FixedDataColumn">4</td>
                     <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>  
                </tr>
         
        </table>
    </div>

</body>
</html>

yaohaifang
关注
css列名不动_纯css实现固定表头和锁定列
weixin_30768979的博客
12-30 670
table表格是一个网站很常用的元素，用以展示大量的数据。在处理表格时，通常会加入许多功能，如斑马线、选中高亮、固定表头、锁定列等等，本篇文章主要介绍如何单纯的使用css实现固定行或列的功能。一般做法大部分的网上介绍的实现方式，甚至部分ui框架如iview(虽然他本就是一个pc端框架)等都是通过三至四个表格组合，然后js处理同步滚动来实现，这样的好处是容易实现，pc端也不会出现什么问题。但是在手机...
css固定表格头部
weixin_41141811的博客
06-25 1384
固定表头 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定表头</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } .table-container {
CSS 固定表头和列
05-27
完整例子 博文链接：https://ideabean.iteye.com/blog/615036
一种使用CSS固定表头和列的方法
weixin_34119545的博客
05-01 139
固定表头的CSS:thead th, thead th.locked {font-size: 14px;font-weight: bold;text-align: center;background-color: navy;color: white;border-right: 1px solid silver;position:relative;cursor: default; } thead t...
通过CSS固定表头和列
tangcaolao的专栏
05-29 546
呵呵,在CSDN上面看到别人的文章,觉的相当有用,转一下,给自己做个笔记,后面会用得到        固定表头和列            .FixedTitleRow        {            position: relative;             top: expression(this.offsetParent.scrollTop);             z-in
用css样式固定表头和列
08-27
用css固定table的表头 或 列，让它不会随滚动条滚动
css固定表头和列.html
01-11
css固定table表头和列，亲测可用
div+css 固定表头和列
01-08
div+css 固定表头和列div+css 固定表头和列
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
5. 对于固定表头，使用`position: fixed`并根据需要设置`left`和`top`。 这个解决方案能够有效地处理宽表格，提供清晰的视图和良好的用户体验，尤其适用于后台管理系统和其他需要大量数据展示的场景。通过理解和...
通过css固定表头和表列通过css固定表头和表列
06-15
比较好的固定表头和表列的例子。 解决了固定表头中rowspan显示异常的问题。
CSS 表头列头固定(实用)
11-22
实现列头和行头的固定,非常实用,能让你尽可能的改变最少的代码实现要求的功能.
css固定表头和第一列
02-22
css和html固定表头和第一列，可上下拖动和左右拖动
vue表格实现固定表头首列
11-02
在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...
CSS实现固定首列和表头
最新发布
__猫玖__的博客
02-16 2413
首行首列固定
html顶部table固定,CSS实现：固定Table表头和第一列
weixin_31139027的博客
07-14 3251
当表格内容太多的时候，固定表头不让标题滚出屏幕外，是一个很人性化的设计；而当横向项目内容太多时，固定第一列(项目列)也是一个很贴心的设计。本文介绍如何用CSS实现固定Table表头和第一列。固定Table表头和第一列CSStable{font-family:"Fraunces",serif;font-size:125%;white-space:nowrap;margin:0;borde...
纯css实现表格的表头和首列固定（不兼容IE）
qq_38118138的博客
08-19 1225
这里用到css的position: sticky;（该样式对IE浏览器的支持较差） 一、首行的表头固定，不随滚动条而滚动。 html表格： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格固定表头</title> </head> <body> <div> <table cellspa
纯CSS实现Table固定表头和首列
热门推荐
Ghjkku的博客
09-15 8万+
HTML结构上，必须将 放在 子节点，且内部不要有其他 position 设置。Table固定表头和首列这种需求应该比较常见。以往的做法，需要写一大堆脚本，而现在，可以使用position:sticky轻松实现这个效果。
table固定表头并且固定左边第一列的纯粹css实现
还是叫我官人吧
03-25 7600
以下是网页版的，小程序版本的因为小程序没有table tr tb th这些标签所以你可以通过view lable模拟出来（也是可以直接做到的 我有时间在放出来） <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>99x99</t...
jQuery实现固定表头和列头的代码示例
接着，函数会创建一系列新的div元素，包括`TableID_tableFix`、`TableID_tableHead`、`TableID_tableColumn`和`TableID_tableData`，这些div将用于存放固定表头、固定列头、可滚动的列和数据部分。 接下来，函数会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值