怎样用CSS控制DataGrid中表格线及边框的颜色

时间:2022-04-13 10:15:16
想使用CSS对DataGrid的格式进行统一的控制,在Style.css中建立相应的样式表,在DataGrid的各个元素中都使用CssClass="类名"加以应用。其他的都是好好的,就是表格线的颜色控制不了。
如果不用CSS控制,只需要在<asp:DataGrid >中加入属性BorderColor=#003366,就可以控制所有线条的颜色。
后来,又想了各种办法,发现在<asp:DataGrid >中加入CssClass="Grid_General",只能控制住DataGrid四个边框的颜色。在<Columns>中每个元素内加入一个<ItemStyle>型如:
<asp:ButtonColumn Text="选取" CommandName="Select">
<ItemStyle CssClass="Grid_Item"></ItemStyle>
</asp:ButtonColumn>
这样就可以通过<ItemStyle>的CSS类型控制DataGrid表格线的颜色。
现在唯独页眉<HeaderStyle>的边框颜色控制不了,不管在CSS里面怎么设置都不行。
还望各位达人看看
另,哪位有通过CSS控制DataGrid样式的详细资料,也望能给偶一份,学习学习:)

18 个解决方案

#1


做为一个菜鸟,我的理解是这样的。
以前我刚接触CSS时,我只懂得在Table里面填一个class。至于table下面的tr、td,我是这样控制的。
比如table中class=main
那我的CSS下面是写成:
.main {border:1px;}
至于再下面的td,我是这样写的:
.main td{border:0px;}
这样就能控制到TD了。

我想能不能这样:
如果把DataGrid在页面下查看源代码。它是显示table的,那么我想能不能用同种方法控制下面的TD?

我现在还没有尝试过。这台电脑又不太好。所以你可以自己再试试。。。。

#2


作为一个程序员...这些东西是比较麻烦的

我建议你不要花太多时间在这些东西上面用css和不用css的效果也是一样的....
我知道datagrid的样式是很麻烦....但很多程序员都是打开美工提供的html来直接改datagrid的样式。
程序员应该用多点脑汁去想想程序的是....当然,程序员会美工的工作当然好...但说话回来,你始终是个程序员

#3


是这样的
datagrid在客户端呈现为table
想想怎么做1px边框表格?
就是为表格设置一个背景色(这个颜色就是边框颜色)
为所有的tr设置背景色(比如白色)
设置table的CellSpacing="1" 就可以了
同样
你在css中是设置背景颜色backcolor而不要考虑去设置边框颜色
为datagrid的header,footer,pager等style执行这个cssclass
然后为整个datagrid指定一个cssclass(背景色就是边框颜色)
最后设置CellSpacing="1"//这里的1代表边框粗细

#4


恩,我试了下,确实可以控制。
又长见识了,呵呵。
以前搜索到一篇帖子,里面有人提到:css是到客户端才起作用的,应该看看datagrid返回到客户端是什么代码,以那些标记来控制。当时不是很明白。原来是这样。
兄弟,有没有在.NET里面使用CSS控制方面的资料?我的补补这方面的东西了。

#5


建议你讲datagrid放到一个table里调用,这样就很容易设置了。

#6


其实你应该多看看css的基本模型
http://blog.yesky.com/Blog/xiaoyu/archive/2005/01/29/69031.aspx

#7


学习

#8


同样学习

#9


^_^,我是太缺少这些基础的东西了,以前都是用到什么去找什么,结果是什么都知道一点点,什么也都不知道,这次一定要将CSS基本的东西弄清楚。
jasmineou(明) ,我感觉你的想法不太好,虽然大多数情况下都是你说的那样,但是美工可以给你拿出方案,但是不一定懂得怎么去实现,再说了,这也是程序员应该知道的。所以还得自己多学点。
看了看,LoveCherry(论成败,人生豪迈;大不了,重头再来!^_^) 的方法也能变相的解决问题,但是设置CellSpacing="1"后,边框就是一条,不是一根细线,很多情况下表格边框用细线感觉比较好。大概略了一下你给的东西,还是蛮详细的。偶会好好学习的。嘿嘿~~~~

#10


http://blog.csdn.net/goody9807/archive/2004/06/29/29525.aspx


要想控制边框 我记得必须设置Datagrid的border=1 才可以吧

你试试!

#11


你要设置border=0就好了,try again

#12


BorderWidth=0

#13


Datagrid中没有border属性,应该是BorderWidth吧。
没用的,BorderWidth控制的只是Datagrid的外边框,内部单元格控制不了,还是对它的TD进行控制吧。

#14


呵呵
LoveCherry(论成败,人生豪迈;大不了,重头再来!^_^) ( 
设BorderWidth=0,然后再设背景颜色后果然好了
偶啥时候才能达到各位达人的地步
55555~~~~~

#15


谢谢各位了
这就结贴

#16


有用的
http://www.musecn.com/11.jpg
是这个效果吧

#17


<ItemStyle CssClass="ItemStyle"></ItemStyle>
.ItemStyle
{
background-color: #d9dee6 ;height:20px;
}

#18


嗯,确实是那个效果

#1


做为一个菜鸟,我的理解是这样的。
以前我刚接触CSS时,我只懂得在Table里面填一个class。至于table下面的tr、td,我是这样控制的。
比如table中class=main
那我的CSS下面是写成:
.main {border:1px;}
至于再下面的td,我是这样写的:
.main td{border:0px;}
这样就能控制到TD了。

我想能不能这样:
如果把DataGrid在页面下查看源代码。它是显示table的,那么我想能不能用同种方法控制下面的TD?

我现在还没有尝试过。这台电脑又不太好。所以你可以自己再试试。。。。

#2


作为一个程序员...这些东西是比较麻烦的

我建议你不要花太多时间在这些东西上面用css和不用css的效果也是一样的....
我知道datagrid的样式是很麻烦....但很多程序员都是打开美工提供的html来直接改datagrid的样式。
程序员应该用多点脑汁去想想程序的是....当然,程序员会美工的工作当然好...但说话回来,你始终是个程序员

#3


是这样的
datagrid在客户端呈现为table
想想怎么做1px边框表格?
就是为表格设置一个背景色(这个颜色就是边框颜色)
为所有的tr设置背景色(比如白色)
设置table的CellSpacing="1" 就可以了
同样
你在css中是设置背景颜色backcolor而不要考虑去设置边框颜色
为datagrid的header,footer,pager等style执行这个cssclass
然后为整个datagrid指定一个cssclass(背景色就是边框颜色)
最后设置CellSpacing="1"//这里的1代表边框粗细

#4


恩,我试了下,确实可以控制。
又长见识了,呵呵。
以前搜索到一篇帖子,里面有人提到:css是到客户端才起作用的,应该看看datagrid返回到客户端是什么代码,以那些标记来控制。当时不是很明白。原来是这样。
兄弟,有没有在.NET里面使用CSS控制方面的资料?我的补补这方面的东西了。

#5


建议你讲datagrid放到一个table里调用,这样就很容易设置了。

#6


其实你应该多看看css的基本模型
http://blog.yesky.com/Blog/xiaoyu/archive/2005/01/29/69031.aspx

#7


学习

#8


同样学习

#9


^_^,我是太缺少这些基础的东西了,以前都是用到什么去找什么,结果是什么都知道一点点,什么也都不知道,这次一定要将CSS基本的东西弄清楚。
jasmineou(明) ,我感觉你的想法不太好,虽然大多数情况下都是你说的那样,但是美工可以给你拿出方案,但是不一定懂得怎么去实现,再说了,这也是程序员应该知道的。所以还得自己多学点。
看了看,LoveCherry(论成败,人生豪迈;大不了,重头再来!^_^) 的方法也能变相的解决问题,但是设置CellSpacing="1"后,边框就是一条,不是一根细线,很多情况下表格边框用细线感觉比较好。大概略了一下你给的东西,还是蛮详细的。偶会好好学习的。嘿嘿~~~~

#10


http://blog.csdn.net/goody9807/archive/2004/06/29/29525.aspx


要想控制边框 我记得必须设置Datagrid的border=1 才可以吧

你试试!

#11


你要设置border=0就好了,try again

#12


BorderWidth=0

#13


Datagrid中没有border属性,应该是BorderWidth吧。
没用的,BorderWidth控制的只是Datagrid的外边框,内部单元格控制不了,还是对它的TD进行控制吧。

#14


呵呵
LoveCherry(论成败,人生豪迈;大不了,重头再来!^_^) ( 
设BorderWidth=0,然后再设背景颜色后果然好了
偶啥时候才能达到各位达人的地步
55555~~~~~

#15


谢谢各位了
这就结贴

#16


有用的
http://www.musecn.com/11.jpg
是这个效果吧

#17


<ItemStyle CssClass="ItemStyle"></ItemStyle>
.ItemStyle
{
background-color: #d9dee6 ;height:20px;
}

#18


嗯,确实是那个效果