利用CSS+DIV来固定table的行和列

最新推荐文章于 2021-08-17 14:07:30 发布

xuyusong

最新推荐文章于 2021-08-17 14:07:30 发布

阅读量2.3k

点赞数 1

文章标签： div table css class datagrid border

本文链接：https://blog.csdn.net/xuyusong/article/details/6618847

版权

这篇博客介绍如何利用CSS和DIV实现HTML表格的横向和纵向滚动条，并保持特定列固定不动。通过设置特定的CSS类，如'.Freezing'和'.FreezingCol'，可以实现表格的行和列在滚动时保持可见。

摘要由CSDN通过智能技术生成

通过CSS和DIV实现一个表格出横纵向滚动条，并且让指定的列固定。多余的话就不说了，代码如下。

<html>
<head>
<title></title>
<style type="text/css">
.Freezing {
    z-index: 10;
    position: relative;
    top: expression(this.offsetParent.scrollTop)
}
.FreezingCol {
    z-index: 1;
    left: expression(document.getElementById("freezingDiv").scrollLeft);
    position: relative
}
</style>
</head>
<body>

<div id="freezingDiv" style="overflow:auto; width:400px; height:155px">
<table cellspacing="0" cellpadding="4" rules="all" bordercolor="#3366CC" border="1" id="DataGrid1" style="background-color:White;border-color:#3366CC;border-width:1px;border-style:None;width:900px;border-

最低0.47元/天解锁文章

xuyusong

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用CSS+DIV来固定table的行和列

通过CSS和DIV实现一个表格出横纵向滚动条，并且让指定的列固定。多余的话就不说了，代码如下。 .Freezing { z-index: 10; position: relative; top: expression(
复制链接

扫一扫