表格头固定而列可滚动的效果
来源：互联网 发布：迈西背单词知乎 编辑：程序博客网 时间：2024/05/21 19:38
对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表格头固定而列可滚动的效果-脚本之家</title>
</head>
<style type="text/css">
body {
font-family: "arial", "helvetica", "sans-serif", "";
font-size: 9pt;
margin: 0px;
scrollbar-face-color:#efefe7;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#a5a5a5;
scrollbar-darkshadow-color:#a5a5a5;
scrollbar-shadow-color:#d6d6ce;
scrollbar-arrow-color:#003184;
scrollbar-track-color:#deded6;
}
table {
font-family: "arial", "helvetica", "sans-serif","";
font-size: 9pt;
line-height: 150%;
color: #000000;
}
.display-tb2
{
border-right: #808080 1px solid;
border-top: #808080 1px solid;
border-left: #808080 1px solid;
border-bottom: #808080 1px solid;
border:0;
cellpadding:2;
cellspacing:0;
margin-top:2px;
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
dyn-behavior:expression(
onscroll == null?
(onscroll = function(){
if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
var oGridBody = document.getElementById("order_GridBody");
oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
event.srcElement.oldScroll == event.srcElement.scrollLeft;
}):true,
onmousedown == null?
(onmousedown = function(){
if(self.currentTH != null) return;
var obj = document.elementFromPoint(event.x,event.y);
var objL = document.elementFromPoint(event.x - 1,event.y);
if(obj.tagName.toLowerCase() == "th")
{
if(objL.tagName.toLowerCase() == "th")
{
obj = objL;
}
if(obj.className == "fixed") return;
self.currentX = event.x;
self.currentTH = obj.childNodes[0];
self.currentTH.setCapture();
}
}):true,
onmouseup == null?
(onmouseup = function(){
if(self.currentTH != null)
{
self.currentTH.releaseCapture();
self.currentTH = null;
}
}):true,
onmousemove == null?
(onmousemove = function(){
if(self.currentTH != null)
{
var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
if(width < 0) width = 0;
var dt = parseInt(self.currentTH.style.width) - width;
self.currentTH.style.width = width;
__resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
self.currentX = event.x;
}
}):true,
self.__resizeCell == null?
(self.__resizeCell = function(idx, width){
var cells = document.getElementById("order_GridBody_Cells");
var rows = cells.childNodes;
var i = 0;
for (var i = 0; i < rows.length; i++)
{
var cell = rows[i].childNodes[idx].childNodes[0];
var resetPattern = /style=[^/s/t/n]+/;
cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
}
}):true
)
}
div.bodyContainer
{
height:250px;
width:760px;
overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
ondblclick == null?
(ondblclick = function()
{
var src = event.srcElement;
if(event.srcElement.tagName.toLowerCase()!="div")
{
src = src.childNodes[0];
}
src.style.width = "";
__resizeCell(src.columnIndex,src.clientWidth);
}):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}
tr.odd
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
tr.even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
}
td.odd_even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
}
th{
color:#ff0000;
}
</style>
<body bgcolor="F6F6F6" style="padding:10 10 10 10">
<div class="tableContainer" id="order_Container">
<!--动态表格-->
<table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order">
<tr>
<td>
<table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<thead>
<th class="fixed"><div columnIndex="0" class="gridCell_narrow">选择</div></th>
<th><div columnIndex="1" class="gridCell_standard">订单编号</div></th>
<th><div columnIndex="2" class="gridCell_standard">订货日期</div></th>
<th><div columnIndex="3" class="gridCell_standard">订货单位</div></th>
<th><div columnIndex="4" class="gridCell_standard">订单类别</div></th>
<th><div columnIndex="5" class="gridCell_standard">产品类别</div></th>
<th><div columnIndex="6" class="gridCell_standard">版本号</div></th>
<th><div columnIndex="7" class="gridCell_standard">订货金额</div></th>
<th><div columnIndex="8" class="gridCell_standard">订单状态</div></th>
</thead>
</table>
</td>
</tr>
<!--<tfoot> 共3页 </tfoot>-->
<tbody>
<tr class="odd">
<td colspan="9">
<div id="order_GridBody" class="bodyContainer">
<table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<tbody id="order_GridBody_Cells">
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="2" /></div></td>
<td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">19</div></td>
<td class="odd_even"><div class="gridCell_standard">直销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="3" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">19</div></td>
<td class="odd_even"><div class="gridCell_standard">购销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="4" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">购销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="5" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">直销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">1.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="6" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">tytutyjh465456</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">购销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="7" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="8" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">总代已审核</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="9" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">32.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="10" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="11" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="12" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="13" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="14" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="15" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="16" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div style="height:15px"></div>
</div>
</body>
</html>
- 表格头固定而列可滚动的效果
- Vue 固定头 固定列 点击表头可排序 表格组件
- ionic实现表格头部和第一列固定且都可滚动
- android开发之横向滚动/竖向滚动的ListView(固定列头)
- Table的思索(二):表头固定而内容滚动的表格
- Ext实现表格列头冻结效果，锁定列头
- 网页表格表头固定并可以自由拉伸列头的问题解决 (完美方案_html_table_seo)
- 表头固定,内容可滚动表格的3种实现方法
- 表头固定内容可滚动表格的3种实现方法
- android开发(14) 可以横向滚动的ListView（固定列头）
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- (转)固定表格标题行或列头
- java 使用poi导出excel，可控制固定前2列固定标头排版，带统计数据格式的
- 固定行,列 分成四个区域,固定头信息,滚动头信息,固定数据信息,滚头数据信息
- 微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
- 固定表格的标题列(CSS)
- 固定表格的标题列_2(CSS)
- JSP中表单数据存储的一种通用方法
- SymbianOS异常三步曲之三：两段构造
- perl 基本操作
- [转载] MFC技术内幕简结
- 一个简单的ASP分页程序
- 表格头固定而列可滚动的效果
- C# 集合类 Array Arraylist List Hashtable Dictionary Stack Queue
- VC用ADO访问数据库全攻略
- IN&EXISTS 与 NOT IN&NOT EXISTS 子查询 区别
- java---new和newInstance区别
- asp下连接数据库大全
- 高效的JSP分页查询
- PHP操作excel的一个例子
- X-Ways.WinHex.v14.8.SR-1.Incl.Keymaker-ZWT
