Gridview表格边框设置

GridView在生成HTML代码的时候会自动加上style="border-collapse:collapse;"以及border=1,rules="all"这些属性,这些在IE下都没什么影响,但是在FF下就会影响显示,style="border-collapse:collapse;";是由于设置了CellSpacing="0"产生的,当设置CellSpacing="1"后就没有,可以去掉style="border-collapse:collapse;";默认情况下CellSpacing="0",所以默认情况下会有style="border-collapse:collapse;"这个属性生成。GridLines="Both"会带来border=1,rules=all这两个属性,设置GridLines="None"后border=0,rules属性则不会出现。

MS默认的GridView生成HTML代码的方式本身就没有去兼容各种浏览器,只是特别照顾了自己的IE,其实MS已经给出了解决办法,那就是自己定义控件如何生成HTML代码,CSS 控件适配器工具包新版发布 介绍如何配置自己的浏览器定义文件。详细的可以参考MSDN:浏览器定义文件架构(browsers 元素)

如何设置GridView让它在IE和FF下都能正常显示呢?下面会进行说明。
1.单元格都有边框线,效果如下:

<asp:GridView ID="GridView1" runat="server" CellPadding="3" GridLines="None" BackColor="Black" CellSpacing="1">
            <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
            <RowStyle BackColor="#ECF5FF" ForeColor="Black" />
            <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
            <HeaderStyle BackColor="#A6CBEF" Font-Bold="True" ForeColor="#404040" BorderColor="#A6CBEF" />
        </asp:GridView>

说明:GridLines="ALL",CellSpacing="0"是造成FF和IE下显示不同的一个很大的原因;其实不进行设置border也是可以达到单元格表现出边框的样式。CellSpacing="1"就控制了单元格之间的间隔是1px,通过设置table的背景和tr的背景来表现出单元格td的border,实际上td的border为0,这个看起来很像的border是table的背景,tr的背景仅仅是改变了td的背景,td之间的space则是根据table的背景显示的,这就是CellSpacing="1"带来的border效果。这样在IE和FF下都能正常显示了。

2.只有横线,没有竖线的效果:

GridView样式如下设置:需要借助额外的css,Gridview自带的类似样式不兼容FF
<style type="text/css">
    .table{border:solid 1px black}
    .table th{border-bottom:solid 1px black;}
    .table td{border-bottom:solid 1px black;}
</style>
<asp:GridView ID="GridView1" CssClass="table" runat="server" CellPadding="3" GridLines="None" BackColor="#ECF5FF" CellSpacing="0">
     <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
     <RowStyle BackColor="#ECF5FF" ForeColor="Black" />
     <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
     <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
     <HeaderStyle BackColor="#A6CBEF" Font-Bold="True" ForeColor="#404040" BorderColor="#A6CBEF" />
</asp:GridView>

3.只有竖线的效果:

更改上面的

<style type="text/css">
    .table{border:solid 1px black}
    .table th{border-right:solid 1px black;}
    .table td{border-right:solid 1px black;}
</style>

即可。
更改table样式为:
.table{border:solid 1px black}
.table th{border:solid 1px black;}
.table td{border:solid 1px black;}
可以实现第一种的显示效果,这才是真的border

至此,GridView的样式设置告一段落了。上面的设置方法在IE,FF下测试通过

时间: 2024-10-29 05:15:15

Gridview表格边框设置的相关文章

[转]CSS如何设置html table表格边框样式

原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示.为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例:table宽度为400px;表格为三列三行,对以上四种情况表格外层加个div

bootstrap-table 使用遇到的问题总结:1.右上角button样式自定义;2.右上角引用图标自定义;3.表头/表格内容显示不对齐;4.自定义设置表头及表格边框样式

问题一:右上角button样式自定义 方法: //修改bootstrap-table右上角按钮样式 $(".table-box .columns-right button").removeClass("btn-secondary").css({"backgroundColor": "#fafafa","border": "1px solid #c2c2c2","color&qu

css中的border-collapse属性如何设置表格边框线?(代码示例)

css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来了解一下css border-collapse属性是什么?它的作用. border-collapse 属性:设置表格的边框是否被合并为一个单一的边框,即:用于设置表格边框是合并显示还是分开显示. border-collapse 属

HTML表格边框的设置小技巧

对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下: 对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解.

html 表格边框的设置

对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下: ID NAME GENDER 1001 mike male 可以发现表格的边框好像很宽,当然这里的"很宽"绝对不是表格border的宽,大家看到的宽应该是<td>之间有间隙所致.因此只需要修改表格的cellspaci

(转)HTML表格边框的设置小技巧

对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下: ID NAME GENDER 1001 mike male 可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格bor

CSS 设置TABLE 表格 边框

/*table列表 合并边框设置*/ .tablelist { border-collapse:collapse; } /*table列表 设置边框宽度及颜色*/ .tablelist td { border:1px solid blue; }

Gridview表格控件

Gridview表格控件 效果图: 分析: 使用和ListvVew很像,都是经过适配器将数据绑定到控件上 具体步骤如下: 1.创建GridView控件,并指定列数 android:numColumns="3" 2.创建显示数据项的数据容器,是一个Lauout文件,里面一个ImageView,一个TextView 上面是ImageView,"小白10"是TextView显示的 3.创建好数据,这里用List来实现 private List<HashMap<

html 边框虚线-html虚线边框设置

html 边框虚线实现通过CSS实现不同对象虚线边框样式(体感音波) 在HTML可以对大部分标签加边框或虚线边框,接下来DIVCSS5会对几个不同标签加虚线边框效果样式,大家可以根据演示扩展灵活掌握与应用到自己DIV+CSS布局中.一.用到CSS样式和HTML标签元素 - TOP 为了对html不同标签加边框虚线,我们选择几个常用标签对齐设置边框虚线效果.(体感音波) 1.html常用标签div标签spanul litable tr td 2.实例用到CSS属性单词(体感音波)borderwid