GridView表头固定,表体滚动效果

网上搜到的用CS方法,效果不好。


实现原理。

1、新建一个table,只显示表头。(同理也可以新建一个GridView,添加一列空行,然后隐藏行,即可只显示表头)

2、隐藏GridView的表头(ShowHeader="false");

3、控制width实现对齐。

 <table align="center" rules="all" 
                    style="width:100%; text-align: center; height: 70px; font-size: medium;" 
                    frame="border">
                    <tr >
                        <td style="width:10%" align="center" rowspan="2">姓名<br></td>
                        <td style="width:16%" colspan="2">星期一</td>
                        <td style="width:16%" colspan="2">星期二</td>
                        <td style="width:16%" colspan="2">星期三</td>
                        <td style="width:16%" colspan="2">星期四</td>
                        <td style="width:16%" colspan="2">星期五</td>
                    </tr>
                    
                    <tr>
                        <td style="width:8%">上午</td>
                        <td style="width:8%">下午</td>
                        <td style="width:8%">上午</td>
                        <td style="width:8%">下午</td>
                        <td style="width:8%">上午</td>
                        <td style="width:8%">下午</td>
                        <td style="width:8%">上午</td>
                        <td style="width:8%">下午</td>
                        <td style="width:8%">上午</td>
                        <td style="width:8%">下午</td>
                         </tr>
                     </table>
        <div  style="border-color: 1; border-style: groove; border-width: thin; OVERFLOW-Y:auto; OVERFLOW-X:hidden; HEIGHT:182px">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                ShowHeader="False" Width="100%">
            <Columns>
                <asp:BoundField DataField="MemberName"  ItemStyle-Width="10%" HeaderText="MemberName" 
                    SortExpression="MemberName"  />
                <asp:BoundField DataField="MonM" HeaderText="MonM" ItemStyle-Width="8%" />
                <asp:BoundField DataField="MonA" HeaderText="MonA" ItemStyle-Width="8%" />
                <asp:BoundField DataField="TueM" HeaderText="TueM" ItemStyle-Width="8%" />
                <asp:BoundField DataField="TueA" HeaderText="TueA" ItemStyle-Width="8%" />
                <asp:BoundField DataField="WenM" HeaderText="WenM" ItemStyle-Width="8%" />
                <asp:BoundField DataField="WenA" HeaderText="WenA" ItemStyle-Width="8%" />
                <asp:BoundField DataField="ThurM" HeaderText="ThurM" ItemStyle-Width="8%"  />
                <asp:BoundField DataField="ThurA" HeaderText="ThurA" ItemStyle-Width="8%"  />
                <asp:BoundField DataField="FriM" HeaderText="FriM"   ItemStyle-Width="8%" />
                <asp:BoundField DataField="FriA" HeaderText="FriA"   ItemStyle-Width="8%" />
            </Columns>
        </asp:GridView>
        </div>

效果为

 

美中不足的是,在ie上可以很好的对齐,但是在别的浏览器上有一点错位。

不懂样式,希望有人能给个好的样式,使其更兼容。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值