Pet*_*son 39
你已经完成了一项任务,如果你成功了,你会成为英雄.我尝试了这个和直截了当的事情 - 定位:固定; <thead> - 是不可能的.我不得不将所有<thead>复制到一个新对象中.但是当你这样做时,<th>元素的水平间距都会消失,因此标题不再与<td>对齐.我最终做了这样的事情:
首先,放弃ie6和ie7.这些家伙没有希望.
制作表的两个副本,一个是身体不可见的,<thead>是可见的,另一个是反之亦然的.
给z-index:1; 到可见<thead>的表格.
给z-index:0; 到可见<tbody>的表格.
与横向滚动处理,但直到你找到后onScroll不是IE8的事件(更不用说IE6),所以,你必须采取的setInterval打破每隔十分之一秒左右,只是处理滚动<THEAD>在ie8中左右.
这将为您提供两个轴上无限滚动的表体,其中一个表头仅在x轴上滚动.几乎适用于FF,Chrome和Safari.但在ie8中是不稳定的.一个真正的皮塔饼.
祝你好运,如果你让这个工作,请写!
只有Firefox和IE6-7浏览器支持内置<tbody>滚动:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Scrolling</title>
<style type="text/css">
div.content
{
border: #000000 1px solid;
height: 400px;
overflow-y: auto;
width: 800px;
}
.fixedHeader
{
white-space: nowrap;
}
.fixedHeader tr
{
height: auto;
position: relative;
}
.fixedHeader tr td
{
background-color: #778899;
border: #000000 1px solid;
text-align: center;
}
tbody.scrollContent
{
overflow-x: hidden;
overflow-y: auto;
height: 370px;
}
.scrollContent tr td
{
background-color: #C0C0C0;
border: #000000 1px solid;
padding-right: 22px;
vertical-align: top;
}
</style>
<!--[if IE]>
<style type=text/css>
div.content
{
overflow-x: hidden;
overflow-y: auto;
}
</style>
<![endif]-->
</head>
<body>
<div>
<div class="content">
<table cellspacing="0">
<thead class="fixedHeader">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
76092 次 |
| 最近记录： |