首页 新闻 会员 周边 捐助

可滚动的表格

0
[待解决问题]

要求：表头和表尾固定，表体可以滚动，数据比较多，所以性能要好。

求大拿赐教。。Asp.net GridView能实现吗？

ovelin的主页 ovelin | 菜鸟二级 | 园豆：202
提问于：2012-08-03 14:20
< >
分享
所有回答(5)
0

.net grid view 是实现不了的，

列需要固定吗？

 比如固定左边多少列不参与水平滚动？

还是只需要固定 表头和 表尾 ？

张坤 | 园豆：1865 (小虾三级) | 2012-08-03 14:38

能实现更好，暂时只想固定表头和表尾，有办法吗？

支持(0) 反对(0) ovelin | 园豆：202 (菜鸟二级) | 2012-08-03 14:40

@ovelin: 

表头放到一个 table 里面，

当中内容 table 外面放一个 div  固定高度，超过高度让其出现滚动条，

表尾放到一个table 里面

支持(0) 反对(0) 张坤 | 园豆：1865 (小虾三级) | 2012-08-03 14:42
0

请直接 度娘：jquery 固定表头

八戒的师傅 | 园豆：1472 (小虾三级) | 2012-08-03 19:15
0 
<!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>适用于IE的固定表头表格样式</title>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <link href="FixTable.css" rel="Stylesheet" type="text/css" />
</head>
<body>  
    <h4>1. 锁定表头和列</h4>
    <div class="fixbox">
        <table class="fixtable">
            <tr>
                <th class="lockcolumn">序号</th>
                <th class="lockcolumn">表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
                <th>表头5</th>
                <th>表头6</th>
                <th>表头7</th>
                <th>表头8</th>
            </tr>
            <tr>
                <td class="lockcolumn">1</td>
                <td class="lockcolumn">test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td class="lockcolumn">2</td>
                <td class="lockcolumn">test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td class="lockcolumn">3</td>
                <td class="lockcolumn">test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td class="lockcolumn">4</td>
                <td class="lockcolumn">test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td class="lockcolumn">5</td>
                <td class="lockcolumn">test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td class="lockcolumn">6</td>
                <td class="lockcolumn">test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td class="lockcolumn">7</td>
                <td class="lockcolumn">test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
    </div>

    <h4>2. 只锁定表头</h4>  
    <div class="fixbox xscroll">
        <table class="fixtable fullwidth">
            <tr>
                <th>序号</th>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
                <th>表头5</th>
                <th>表头6</th>
                <th>表头7</th>
                <th>表头8</th>
            </tr>
            <tr>
                <td>1</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>2</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>3</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>4</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>5</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>6</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>7</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>8</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>9</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>10</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
    </div>
</body>
</html>
/* 
*  锁定表头表格样式，仅适用于IE6/7/8
*  Create by Aries BLOG: http://www.cnblogs.com/sansi/
*/
body
{
    font-family: Tahoma;
    font-size: 12px;
}
.fixbox 
{
    border:1px solid #ccc;
    width:600px; 
    height:150px;
    overflow:auto; 
    position:relative;
    z-index:202;
}
.fixtable
{
    width:750px;
    z-index:1001;
    position:relative;
    overflow:auto;
    border-spacing:0;
    border-collapse:collapse;
    border:0;
}
.fixtable tr
{
    background-color:#fff;
}
.fixtable th 
{
    top:expression(this.parentElement.parentElement.parentElement.parentElement.scrollTop - 0);
    position:relative;
    z-index:10;
    background:url(headbg.jpg) repeat-x top left;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    height:19px;
}
.fixtable td
{
    height:20px;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    text-align:center;
}
th.lockcolumn
{
    left:expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft - 0);        
    z-index:99;
    width:80px;
}
td.lockcolumn
{
    position:relative;
    left:expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft - 0);    
}

.fullwidth
{
    width:100%;
}

.xscroll
{
    overflow-x:hidden;
}

我之前网上找到的，现在转给你了

安卓粉丝 | 园豆：99 (初学一级) | 2012-08-07 00:16

这个好像对ie8没效果，不过还是谢谢你

支持(0) 反对(0) ovelin | 园豆：202 (菜鸟二级) | 2012-08-07 08:25
0

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .classtr
        {
            background-color: #DDA0DD;
            top: expression(document.getElementById("testDiv").scrollTop-2);
            position: relative;
            z-index: 20;
        }
        .classtd
        {
            background-color: #FFDEAD;
            left: expression(document.getElementById("testDiv").scrollLeft-2);
            position: relative;
        }
        #testDiv
        {
            width: 600px;
            height: 200px;
            overflow: auto;
        }
    </style>
</head>
<body style="overflow: hidden">
    <div id="testDiv">
        <table width="700px" style=" border:solid 1px blue;height: 400px;" cellpadding="0" cellspacing="0">
            <tr class="classtr">
                <td class="classtd">
                    姓名
                </td>
                <td>
                    性别
                </td>
                <td>
                    年龄
                </td>
                <td>
                    出生日期
                </td>
                <td>
                    工作地点
                </td>
                <td>
                    联系方式
                </td>
                <td>
                    备注
                </td>
            </tr>
            <tr>
                <td class="classtd">
                    美工部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    销售部
                </td>
                <td>
                    财务部
                </td>
                <td>
                    美工部
                </td>
            </tr>
            <tr>
                <td class="classtd">
                    销售部
                </td>
                <td>
                    美工部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    应用开发部
                </td>
            </tr>
            <tr>
            <td class="classtd">
                姓名
            </td>
            <td>
                性别
            </td>
            <td>
                年龄
            </td>
            <td>
                出生日期
            </td>
            <td>
                工作地点
            </td>
            <td>
                联系方式
            </td>
            <td>
                备注
            </td>
            </tr>
            <tr>
                <td class="classtd">
                    美工部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    销售部
                </td>
                <td>
                    财务部
                </td>
                <td>
                    美工部
                </td>
            </tr>
            <tr>
                <td class="classtd">
                    销售部
                </td>
                <td>
                    美工部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    应用开发部
                </td>
            </tr>
            <tr>
                <td class="classtd">
                    财务部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    美工部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    财务部
                </td>
            </tr>
            <tr>
                <td class="classtd">
                    美工部
                </td>
                <td>
                    销售部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    销售部
                </td>
            </tr>
            <tr>
                <td class="classtd">
                    应用开发部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    销售部
                </td>
                <td>
                    美工部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    研发部
                </td>
            </tr>
            <tr>
                <td class="classtd">
                    销售部
                </td>
                <td>
                    美工部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    应用开发部
                </td>
            </tr>
            <tr>
                <td class="classtd">
                    财务部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    美工部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    财务部
                </td>
            </tr>
            <tr>
                <td class="classtd">
                    美工部
                </td>
                <td>
                    销售部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    研发部
                </td>
                <td>
                    应用开发部
                </td>
                <td>
                    技术支持部
                </td>
                <td>
                    销售部
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

ＩＥ８有效果，表头和列头都锁定了

xyq_雨晴 | 园豆：159 (初学一级) | 2012-08-07 15:05

有了。。谢谢啊！

支持(0) 反对(0) ovelin | 园豆：202 (菜鸟二级) | 2012-08-07 15:27
0

这样的jquery的插件还是很多的。

chenping2008 | 园豆：9836 (大侠五级) | 2012-08-09 14:26
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。