用css+div模拟GridView里跨列的表头--狼子

※ 用css+div模拟GridView里跨列的表头

狼子发表于 2007-6-18 19:38:00 阅读全文 | 回复(0) | 引用通告 | 编辑

GridView里表头跨列，好像要用好复杂的代码，我现在模拟他，就是避开那堆代码，因为GridView自己本身是身成一个一个单元格的，所以我就在这些单元格里再分

如果是像以前使用<table>来定位的方法，因为单元格容易被内容撑大，所以当表头模块和内容模块，用了不同的<table>时，内容容易走位，所以使用<div>控制

先看这个最简单的，使用div做一行两列的代码

如果红色那个宽度设置去掉，第二列会根据内容，占满这一行剩下的空间

下面的模拟就是使用这个做的，好简单的，会html的人就会这个了，不会c#都会做GridView的跨列的表头了

<asp:TemplateField HeaderText="借出日期/登记人" SortExpression="bDay">
                <ItemStyle HorizontalAlign="Center" Width="160px" />
                <HeaderTemplate>
                    <div style="border-bottom:solid 1px #ECE9D8;border-collapse:collapse">借出信息</div>
                    <div style="padding-top:2px;">
                        <div style="float:left; width:90px; border-right:solid 1px #ECE9D8;">日期</div>
                        <div style="float:left; width:60px;">登记人</div>
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div style="float:left; width:90px; border-right:solid 1px #ECE9D8;">
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("bDay", "{0:yyyy-MM-dd}") %>'></asp:Label>
                    </div>
                    <div style="float:left; width:60px; padding-top:2px;">
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("bTrueName") %>'></asp:Label>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>

上面的代码的显示效果是这样的，因为div的width设置是很严格的，所以内容再大也不会走位，和表头上对应的位置也很好

这种方法的缺点是，因为是在GridView的单元格里模拟，所以如果GridView本身，设置的cellspacing比较大，那div就会离单元格的边远一点了，就是模拟会失真，我现在设置的cellspacing = 2，看上去好像还可以骗人

用户登录

查　　找

最新评论

最新留言

常用网站

网易邮箱 GMAIL

百度搜索 ＭＳＤＮ

霏凡软件 ＢＴ精品

影视帝国 射手网

电驴下载 全库网

友情连接

茄菲的窝 冰冰博客

枫叶飘零 玫　　瑰

ＡＣＥＮ 云豹子

统　　计

发表评论：