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控件适配器工具包新版发布介绍如何配置自己的浏览器定义文件。

如何设置GridView让它在IE和FF下都能正常显示呢？下面会进行说明。

1.单元格都有边框线，效果如下：

<asp:GridViewID="GridView1" runat="server" CellPadding="3"GridLines="None" BackColor="Black"CellSpacing="1">

<FooterStyleBackColor="#C6C3C6" ForeColor="Black" />

<RowStyleBackColor="#ECF5FF" ForeColor="Black" />

<SelectedRowStyleBackColor="#9471DE" Font-Bold="True"ForeColor="White" />

<PagerStyleBackColor="#C6C3C6" ForeColor="Black"HorizontalAlign="Right" />

<HeaderStyleBackColor="#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

<styletype="text/css">

.table{border:solid 1px black}

.table th{border-bottom:solid 1px black;}

.table td{border-bottom:solid 1px black;}

</style>

<asp:GridViewID="GridView1" CssClass="table" runat="server"CellPadding="3" GridLines="None"BackColor="#ECF5FF" CellSpacing="0">

<FooterStyleBackColor="#C6C3C6" ForeColor="Black" />

<RowStyleBackColor="#ECF5FF" ForeColor="Black" />

<SelectedRowStyleBackColor="#9471DE" Font-Bold="True"ForeColor="White" />

<PagerStyleBackColor="#C6C3C6" ForeColor="Black"HorizontalAlign="Right" />

<HeaderStyleBackColor="#A6CBEF" Font-Bold="True"ForeColor="#404040" BorderColor="#A6CBEF" />

</asp:GridView>

3.只有竖线的效果：

更改上面的<styletype="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:solid1px black}

.table th{border:solid 1px black;}

.table td{border:solid 1px black;}

可以实现第一种的显示效果，这才是真的

用CSS解决asp.net中Gridview边框样式问题

html标签中的bordercolor属性指定表格边框颜色之后,无论是表格的四个边框还是表格内部的单元格

边框颜色便都设置好了.但是在asp.net的gridview控件中,设置bordercolor之后,在生成的html代码

中是这样表示的:

<tableclass="gridview_m" cellspacing="0" rules="all"border="1" id="ctl00_Content_GV_1"

style="border-color:#93C2F1;border-collapse:collapse;">

原来gridview中设置的bordercolor属性是css中的属性,其结果就是gridview的四个边框的颜色变了,

但是内部单元格的颜色却是灰色,而不是你指定的颜色.

网上有不少朋友讨论过这个问题,有一种解决方法是用代码给gridview添加真正的bordercolor属性

例如:

this.GridView1.Attributes.Add("bordercolor","red");

这样的缺点是不太灵活,如果需要用主题来控制界面样式

而代码中又有这样的语句的话,就不是很合适

利用css提供的机制,可以比较好的解决这个问题

举个例子

在主题中,将gridview的cssclass设置为gridview_m

<asp:GridViewrunat="server" CssClass="gridview_m" >

<HeaderStyleCssClass="girdview_head" />

<RowStyleCssClass="gridview_row" />

<PagerStyleHorizontalAlign="Center" />

</asp:GridView>

然后在css样式表中设置:

table.gridview_m

{

border-collapse:collapse;

border:solid1px #93c2f1;

width:98%;

font-size:10pt;

}

table.gridview_mtd,th

{

border-collapse:collapse;

border:solid1px #93c2f1;

font-size:10pt;

}

以上css样式中还有其他样式,主要就是这一句:table.gridview_mtd,th

将会给class="gridview"的table中的th和td标签应用样式

这样就解决了gridview的边框问题

在gridview中实现隔行样式转换的方法

protectedvoid GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

//我们先设置当鼠标上去的时候他的背景色改变

e.Row.Attributes.Add("onmouseover","c=this.style.backgroundColor;this.style.backgroundColor='#ff6699'");

//下面我们再设置当鼠标离开后背景色再还原

e.Row.Attributes.Add("onmouseout","this.style.backgroundColor=c;");

/为特定的数改变行样式这也是在这个事件里面，因为这个事件是在数据被绑定的时候执行的

for (int i = 0; i < GridView1.Rows.Count;i++)

{

//为了对全部数据行都有用，我们使用循环 //

stringlbl = Convert.ToString(DataBinder.eval_r(e.Row.DataItem,"state"));

//我们得取出行中state字段绑定的值，用他作为判断条件 //

if(lbl == "BB") if(e.Row.RowIndex % 2 == 1)

{

//如果他的值等于BB，那么

e.Row.BackColor= Color.LimeGreen;

//给当前行的背景色赋值

}

GridView样式设置相关推荐

DevExpress导出Excel样式设置
/// <summary>/// 导出到Excel/// </summary>/// <param name="gridControl">Gri ...
asp.net 2.0 中GridView里设置日期格式
在asp.net 1.0 中的datagrid 中设置日期字段格式时用 DataFormatString="{0:yyyy-MM-dd}"即可. 在gridview 中设置 ...
placeholder的样式设置
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. input::-webkit-input-placeh ...
SVG基本形状及样式设置
前面的话图形分为位图和矢量图.位图是基于颜色的描述,是由像素点组成的图像:而矢量图是基于数学矢量的描述,是由几何图元组成的图像,与分辨率无关.可缩放矢量图形,即SVG,是W3C XML的分支语言之一 ...
在GridView中设置每个单元格的数据
在GridView中设置每个单元格的数据今天做后台开发时,需要实现一个需求是在GridView渲染出来的显示数据的表格中增加一列数据:状态列.增加一列数据是比较简单的,但是,状态的表示在数据库中使用 ...
Qt Creator指定代码样式设置
Qt Creator指定代码样式设置指定代码样式设置指定代码样式设置 Qt Creator使用文件的MIME类型来确定用于打开文件的模式和编辑器.Qt Creator在C ++代码编辑器中以&qu ...
Pandas 表格样式设置指南，看这一篇就够了！
源自/Python数据之道最近这些年,Python在数据分析以及人工智能领域是越来越火. 这离不开pandas.numpy.sklearn.TensorFlow.PyTorch等数据科学包,尤其是 ...
滚动条颜色样式设置说明
方案一: css样式详细介绍,网页滚动条样式设置各条语句含义如下: Crollbar-Face-color:滚动条页面颜色设定: Scrollbar-Highlight-Color:滚动条斜面和左面 ...
css 修改placeholder颜色 , placeholder的样式设置
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...
元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式
元素的样式设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...

GridView样式设置

GridView样式设置相关推荐

最新文章

热门文章