css固定表格titile和首列的实现

最新推荐文章于 2024-06-25 16:31:06 发布

原创最新推荐文章于 2024-06-25 16:31:06 发布 · 2.1k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#css #class #stylesheet #border #html #table

技术学习专栏收录该内容

39 篇文章

订阅专栏

本文介绍了使用DIV+CSS进行网页布局的方法，包括锁定标题和首列的CSS样式，并讨论了用户体验问题及可能的改进方案。

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

经过几天的学习，稍微了解了些div+css的网站布局的思路和好处。
本来是confuseLing给我发来了一段代码，实现了锁定title和first col的css，但是在用户体验上并不好，我整理了一下。言归正传，直接说这个的实现。

test.css:

.firstRow {

background-color:#CC9900;

top:expression(this.offsetParent.scrollTop);

z-index:10;

position:relative;

}

.corner {

background-color:#CC9900;

z-index:10;

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

top:expression(this.offsetParent.scrollTop);

position:relative;

}

.firstCol {

background-color:white;

z-index:10;

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

position:relative;

}

.relative{

position:relative;

}

div {

overflow:auto;

width:300px;

height:150px;

}

tr {height:50px;}

test.html:

<html>

<head>

<title>test css</title>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<link href="test.css" type="text/css" rel="stylesheet">

</head>

<body>

<div>

<table border="1px" cellpadding="0" cellspacing="0" width="500px">

<tr class="firstRow">

<td class="corner">1th Row</td>

<td class="relative">1th Row</td>

<td class="relative">1th Row</td>

<td class="relative">1th Row</td>

<td class="relative">1th Row</td>

</tr>

<tr class="relative">

<td class="firstCol">2th Row</td>

<td>2th Row</td>

<td>2th Row</td>

<td>2th Row</td>

<td>2th Row</td>

</tr>

<tr class="relative">

<td class="firstCol">3th Row</td>

<td>3th Row</td>

<td>3th Row</td>

<td>3th Row</td>

<td>3th Row</td>

</tr>

<tr class="relative">

<td class="firstCol">4th Row</td>

<td>4th Row</td>

<td>4th Row</td>

<td>4th Row</td>

<td>4th Row</td>

</tr>

</table>

</div>

</body>

</html>

这个的用户体验并不好，尤其是scroll之后，画面的边缘有略微的毛边，是不是可以把table border干掉，然后每个cell 设置 cell border，可以解决这个问题，今天我是没有空来探讨啦。

另外这个css的expression并不支持最新的css2.0和html4.0标准。虽然最新的ie支持但是加上了w3c的标准后，程序像预想一样正常运行。

这里介绍一个软件：

TopStyle Pro 3.0 可以检测css是否符合w3c的web 2.0标准。
至少因为使用了expression。上述代码无法通过web 2.0的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">标准

TopStyle Pro 3.0 试用期注册表破解字段为：
HKU/S-1-5-21-1177238915-1580818891-1060284298-500/Software/Microsoft/Windows/CurrentVersion/WinSHTrack

是论日算的，从那天起不知道，但是你给它加1000天，就慢慢使用吧。
使用RegShot 监测的c:/和注册标的变化查到的这个字段，虽然还是很讨厌的会弹出试用框，但是毕竟可以长期使用了。

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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