召唤CSS顶级高手解决一个棘手难题,关于tbody overflow和thead tfoot fixed!

suonety 2006-04-17 12:08:19
如何用CSS创建带滚动条的table?让tbody支持overflow: auto;固定thead和tfoot!要求不打破表格原有格局,按照标准的表格语法,效果必须支持IE6.0,和firefox和opera!此帖500分,解决问题后另开帖给400分!可以参考http://www.imaputz.com/cssStuff/bigFourVersion.html,这个网址给出的结果没有解决固定tfoot的问题!
表格形式:
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>row1</td>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row4</td>
<td>row4</td>
</tr>
<tr>
<td>row5</td>
<td>row5</td>
<td>row5</td>
</tr>
<tr>
<td>row6</td>
<td>row6</td>
<td>row6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>foot1</td>
<td>foot2</td>
<td>foot3</td>
</tr>
</tfoot>
</table>
...全文
784 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
tanlin1978 2006-04-20
  • 打赏
  • 举报
 回复
请问一下，我将eoe(不会写程序的嗷嗷) 提供的代码的第一句：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
删除后，就不能实现theader固定功能了，是什么原因呢？

我是新人，请大家不要BS我啦
东邪 2006-04-20
  • 打赏
  • 举报
 回复
那是為了聲明這是一個xhtml1.0嚴格版本的檔案。
有的樣式在不同聲明下，作用會有差異。
realdreamer 2006-04-19
  • 打赏
  • 举报
 回复
太抠了,作软件不要太抠,现在技术不能支持的就换种方式去考虑.
东邪 2006-04-18
  • 打赏
  • 举报
 回复
根据楼主提供的网站,我简要修改了一下,好像差不多可以达到要求
不过在opera下面,定位有点问题呵呵,送给楼主,自己参考一下,我还有其他事情要做,暂时没空继续研究咯....
因为内容太长,没办法只好发出网址:

http://www.45eggs.com/files/other/overflow.html
东邪 2006-04-18
  • 打赏
  • 举报
 回复
单单项奖正值table应该是不行,可以参考楼上的方法与楼主自己找到的那个网址里面提供的方法,不过楼上的在opera下显示不正常,.
suonety 2006-04-18
  • 打赏
  • 举报
 回复
eoe(不会写程序的嗷嗷) 你的答案我测试了一下，我尝试给单元格用CSS加上边框，但始终都没法正常显示，希望你继续关注这个问题，我期待你能给出更好的解决方案！500分不够可以再加
是是非非 2006-04-17
  • 打赏
  • 举报
 回复
电脑坏了 ， 标记一下
回头看看

eoe 2006-04-17
  • 打赏
  • 举报
 回复
看了感觉有点兴趣~不过上班要干公司的活~写了个只支持IE6跟FF
晚上有空再研究~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
div.tablebox{
float: left;
border:1px solid;
position: relative;
}
div.tablebox div{
overflow: auto;
width: 325px;
height: 100px;
padding: 24px 0;
}
th,td{
width: 100px;
font:12px/16px sans-serif;
color: Black;
background-color: White;

}
thead tr {
position: absolute;
top: 0 !important ;
top: -2px;;
height: 24px;
line-height: 24px;

}
thead tr th,tfoot tr td{
float: left;
}
tfoot tr{
position: absolute;
bottom: 0 !important ;
bottom: -2px;

}

/*tfoot tr td{
position: absolute;
}*/
tbody{
display: block;
}
tbody td{
height: 24px;
}
</style>
</head>

<body>
<div class="tablebox">
<div>
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>foot1</td>
<td>foot2</td>
<td>foot3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>row1</td>
<td>row1</td>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row4</td>
<td>row4</td>
</tr>
<tr>
<td>row5</td>
<td>row5</td>
<td>row5</td>
</tr>
<tr>
<td>row6</td>
<td>row6</td>
<td>row6</td>
</tr>
</tbody>

</table>
</div>
</div>
</body>
</html>
suonety 2006-04-17
  • 打赏
  • 举报
 回复
谢谢孟子大哥，不过你给出的结果违背了我的初衷，你使用了3个table，而且滚动内容的第一行被遮盖了一部分，我的前提要求是用一个table来实现，thead和tfoot固定，tbody溢出滚动
孟子E章 2006-04-17
  • 打赏
  • 举报
 回复
Ie和FireFox都支持的。 Opera没有测试

<style>
table#headers {table-layout:fixed;}
table#listtable{table-layout:relative;}
</style>
<script language="javascript">
var rh;
var fr;
var ds;
var hs;
var ft;
var ftt

function syncScroll(e) {
hs.scrollLeft = ds.scrollLeft;
ft.scrollLeft = ft.scrollLeft;

}

function syncResize(e) {
hs.style.width = ds.offsetWidth-(ds.offsetWidth - ds.clientWidth);

for( i =0; i < rh.childNodes.length; i++ ) {
rh.childNodes[i].width = fr.childNodes[i].offsetWidth;
}
ft.style.width = document.getElementById("listtable").offsetWidth

for( i =0; i < ftt.childNodes.length; i++ ) {
ftt.childNodes[i].width = fr.childNodes[i].offsetWidth;
}
}

function init2() {
rh = document.getElementById("rh");
fr = document.getElementById("fr");
ds = document.getElementById("ds");
hs = document.getElementById("hs");
ft = document.getElementById("foot");
ftt = document.getElementById("fth");

if ( navigator.userAgent.toLowerCase().indexOf( 'gecko' ) != -1 ) {
hs.style.overflow='-moz-scrollbars-none';
}

hs.style.top = ds.offsetTop;
hs.style.left = ds.offsetLeft;
ft.style.width = fr.offsetWidth;

hs.style.visibility = 'visible';
ds.onscroll=syncScroll;
window.onresize=syncResize;
syncResize();
}

</script>
<body onload="init2()">
<div style="overflow:hidden;z-index:3;visibility:hidden;position:absolute;" id='hs'>
<table cellpadding="0" cellspacing="1" id="headers" bgcolor=red width=90%>
<tr id='rh' height="25" class="TableHead" bgcolor=white>
<th>组织部门</th>
<th>姓名</th>
<th>职位</th>
</tr>
</table>
</div>
<div style="width:100%;height:100px;overflow:auto;z-index=2;" id='ds'>
<table id=listtable bgcolor=red cellpadding="0" cellspacing="1" width=90%>
<tr id='fr' bgcolor=white>
<td>row1</td>
<td>row1</td>
<td>row1</td>
</tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr> </tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr></tr>
<tr bgcolor=white>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr>
</table>
</div>
<table cellpadding="0" cellspacing="1" id="foot" bgcolor=red width=90%>
<tr height="25" bgcolor=white id=fth>
<th>组织部门</th>
<th>姓名</th>
<th>职位</th>
</tr>
</table>

你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中，经常要设置特殊的字体效果，边框圆角等等，还要考虑兼容性的问题，CSS网页布局，说难，其实很简单。说它容易，往往有很多问题困扰着新手，在中介绍了非常多的技巧，这些小技巧与知识能事半功倍的给大家以帮助，经验丰富的CSS程序员通常都知道这一点，但初学者不要错过了！重要的CSS规则 这里有25个非常有用的CSS技巧，将帮助你解决让你棘手的CSS代码问题。你可以直接使用到你现...
应该知道的25个非常有用的CSS技巧
　　在我们的前端CSS编码当中，经常要设置特殊的字体效果，边框圆角等等，还要考虑兼 　　容性的问题， CSS网页布局，说难，其实很简单。说它容易，往往有很多问题困扰着新 　　手，在中介绍了非常多的技巧，这些小技巧与知识能事半功倍的给大家以帮助，经验丰 　　富的CSS程序员通常都知道这一点，但初学者不要错过了!重要的CSS规则 　　这里有25个非常有用的CSS技巧，将帮助你解决让你棘手的CS...
html欢饮滚动条,HTML和CSS基础知识的总结
form标签 有method和action属性表单域filedsetinput标签type属性，size属性等select标签(要写name，id等属性)option标签(要写value属性和nanme属性等)optgroup对下拉框进行分组用label标签的for属性规定与哪一个元素绑定(for='这是id名')Talbe标签由thead(可以省略)、tbody、tfoot(可以省略)、tr、t...
30个常用的CSS代码片段分享
这次主要分享在前端开发中可能会用到的一些常用的CSS代码片段，列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，仔细观察会发现，其实就是平常所学的一些知识汇总。
h5页面如何切图_切图与CSS入门
不会CSS的后端不是好的程序猿JS 对于后端小伙伴来说不算难点，能够顺手的使用，涉及到 CSS 就会有点懵逼了。为了让后端同事更愉快的玩转 CSS，做一个好的切图仔，下面我将讲一些如何提升自己的 CSS 技巧，帮助后端同事快速还原 PSD。前端页面的书写顺序先看设计稿编写 HTML 代码编写 CSS 代码编写 JS 代码今天我们主要关注编写 CSS 代码，在写 CSS 代码时，我们需要从PSD中拿...
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章