CSS实现固定表头 HTML表格

最新推荐文章于 2024-08-13 17:19:23 发布
原创 最新推荐文章于 2024-08-13 17:19:23 发布 · 3.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #stylesheet #table #border #div

本文介绍了一种针对Internet Explorer浏览器的表格实现方案，通过调整CSS样式来优化表格滚动时头部固定的效果，并解决了同态构建表格时出现的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<head>
<title></title>
<link rel="stylesheet" href="demo.css" type="text/css">
</head>
<body>
<p>这段空间的高度会自动计算</p>
<div id="lockedDiv">
<table  width="100%" border="0" cellspacing="0">
  <tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <th>d</th>
    <th>e</th>
    <th>f</th>
    <th>g</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</table>
</div>
</body>
</html>

BODY {
    overflow-y:auto;
}

div#lockedDiv{
    width: 100%;
    height: expression(document.body.offsetHeight-document.getElementById("lockedDiv").offsetTop-25);
    overflow: auto;
}
div#lockedDiv table th, th.locked{
    position:relative;
    top: expression(document.getElementById("lockedDiv").scrollTop);
    z-index: 20;
    font-family: "宋体";
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    height: 22px;
    background-color: #DAECC8;
    white-space: nowrap;
    border-left: 1px solid silver;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}
div#lockedDiv table{
    border-right: 1px solid silver; 
}
div#lockedDiv table TD {
    height: 22px;
    font-family: "宋体", "Arial", "Helvetica";
    font-size: 12px;
    border-left: 1px solid silver;
    border-bottom: 1px solid silver;
}

 最近发现在一些特定条件下,诸如同态构建表格的时候,会有问题所以稍微改动了一下

 

BODY {
    overflow-y:auto;
}

div#lockedDiv{
    overflow: auto;
    position:absolute;
    padding:0;
    margin:0;
    width: expression(document.body.offsetWidth-16);
    height: expression(document.body.offsetHeight-document.getElementById("lockedDiv").offsetTop-25);
}
div#lockedDiv table th{
    position:relative;
    top: expression(document.getElementById("lockedDiv").scrollTop); /*IE5+ only*/
    z-index: 20;
    font-family: "宋体", "Arial", "Helvetica";
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    height: 22px;
    background-color: #DAECC8;
    white-space: nowrap;
    border-left: 1px solid silver;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}
div#lockedDiv table{
    margin:0;
    border-right: 1px solid silver; 
}
div#lockedDiv table TD {
    height: 22px;
    font-family: "宋体", "Arial", "Helvetica";
    font-size: 12px;
    border-left: 1px solid silver;
    border-bottom: 1px solid silver;
}
div#lockedDiv table TD.STD {
    height: 22px;
    font-family: "宋体", "Arial", "Helvetica";
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    background-color: #DAECC8;
    text-align: center;
    border-left: 1px solid silver;
    border-bottom: 1px solid silver;
}
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
纯CSS实现表头固定
weixin_33843947的博客
03-06 531
纯CSS实现表头固定之所以难，主要在两点。一是占有最大市场份额的IE6不支持position:fixed。另一个，是人们想破头都想在一起表格中实现这种效果。不过外国真的人用纯CSS实现了这种效果，动用了数量惊人的CSS hacks……我觉得，如果搞到代码如此难懂且难扩展，还不如用javascript好了。碰巧今天我也遇到这种需求，换个视角想想，真的搞出来了。 我们知道，CSS是负责表现，HTML...
HTML表格固定表头的做法
鸡仔哥的专栏
03-22 961
HTML表格固定表头的做法(only for IE)： .FixedTitleRow { position: relative; top: expression(this.offsetParent.scrollTop); z-index: 10; background-color: white; } .Fi
css 固定表头
u010865136的专栏
04-03 868
表明该元素将固定在距离视口顶部的位置，即保持在屏幕的顶部。这通常用于实现类似固定表头、固定导航栏等效果。类名的元素设置为粘性定位（sticky positioning），并让其距离视口顶部（top）为 0。页面条数太多，下滑动时，表头上去了，想要将表头固定在顶部，锁住表头。粘性定位使得元素在滚动到特定位置时会固定在屏幕上。表格表头那一行tr中添加如下属性。，这段代码的作用是将具有。
固定表头的CSS
信手涂鸦
11-23 739
抄别人的，留在自己的上面，以便查：     Header A     Header B     Header C 爽！http://dev.youkuaiyun.com/develop/article/51/51972.shtm
css固定table表头的实现代码可同时看到表头和表格底部
09-25
使用CSS固定表格表头的技术可以通过多种实现方式完成。此处提供了两种方法的代码示例，让我们来深入探讨这些技术点。 首先，来看第一种实现方法。通过使用一个外层的div容器来包裹table元素，并设置div容器的...
纯CSS实现表头固定表格滚动条效果
12-24
表格应该分为两部分：固定表头和可滚动的主体。可以这样编写： ```html 列1 列2 <!-- 更多列... --> 数据1 数据2 <!-- 更多行... --> <!-- 更多行... --> ``` 接下来，我们将使用CSS来...
超简单纯css固定表头
03-27 489
* 隐藏滚动条*************************************************** */
HTML table表头固定
普罗旺斯
09-27 1545
【代码】HTML table表头固定。
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html 固定表头 （上下，左右，缩放均支持，代码简单）
04-09
html 固定表头 （上下，左右，缩放均支持，代码简单）
HTML Table固定表头完美实现
03-16
NULL 博文链接：https://ado88.iteye.com/blog/437305
在HTML中固定表格表头的简单方法
最新发布
yivifu的专栏
08-13 1737
表文介绍了一种不使用JavaScrip也不用第三方插件简单实现在HTML页面中固定表头滚动表格的效果。
css固定表头
qd_liyp的专栏
02-12 726
body,table, td, a {font:9pt;}  /*重点：固定行头样式*/ .scrollRowThead{position: relative;  left: expression(this.parentElement.parentElement .parentElement.parentElement.scrollLeft); z-index:0;} /*重点：固定表
CSS固定表头
说故事的五公子
08-08 293
CSS固定表头 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
如何实现 HTML/CSS 中的表头固定
CbrFullstack的博客
10-01 546
在 Web 开发中，有时候我们需要在表格中固定表头，以便在滚动表格内容时仍然能够看到表头信息。的高度设置为一个固定值（例如 300px），并将其设置为具有垂直滚动条的可滚动区域。通过将上述 CSS 代码添加到你的样式表中，并将 HTML 结构与表格一起使用，你就可以实现一个具有固定表头的表格了。接下来，我们将使用 CSS 来实现表头固定的效果。首先，我们需要一个包含表格的 HTML 结构。我们还设置了表头的背景颜色，以使其与表格内容区分开来。元素的定位为固定定位，并将其置于表格容器的顶部（
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值