用CSS设计GridView的行和单元格 [英] Styling a GridView's rows and cells with CSS

问题描述

我想用CSS来格式化我的GridView行。

我已经在aspx中设置了我的GridView：

 < asp：GridView ID =GridView1runat =server> 
< / asp：GridView> 
  

我通过调用一个方法来设置并绑定代码隐藏的数据源以获取我的数据集来自数据访问层。然而，因为我以编程方式设置了数据源，所以行和单元没有id属性。

你如何使用CSS来设置和格式化这些行和单元格？

这是当前生成的HTML ：

 < div> 
< table cellspacing =0rules =allborder =1id =ContentPlaceHolderHome_GridView1style =border-collapse：collapse;> 
< tr> 
< th scope =col>日期< / th>< th scope =col> Project< / th>< th scope =col> Amount< / th> 
< / tr>< tr> 
< td> 1/1/2011 12:00:00 AM< / td>< td>我的公司< / td>< td> 1000.99< / td> 
< / tr>< tr> 
< td> 2/1/2011 12:00:00 AM< / td>< td> ABC公司< / td>< td> 1001.99< / td> 
< / tr>< tr> 
< td> 1/3/2011 12:00:00 AM< / td>< td> MY COMPANY< / td>< td> 1002.99< / td> 
< / tr>< tr> 
< td> 4/1/2011 12:00:00 AM< / td>< td> MY COMPANY< / td>< td> 1003.99< / td> 
< / tr> 
< / table> 
< / div> 
  

解决方案

使用这样的选择器

 < style> 
＃ContentPlaceHolderHome_GridView1 td {
 background：#ccc; 
} 
< / style> 
  

I want to use CSS to format my GridView rows.

I've set up my GridView in the aspx like so:

<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

I set and bind the data source in the code-behind by calling a method to get my data set from a data access layer.

However, because I set the datasource programmatically, the rows and cells have no id attributes.

How can you use CSS to style and format those rows and cells?

This is the HTML generated currently:

<div>
    <table cellspacing="0" rules="all" border="1" id="ContentPlaceHolderHome_GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">Date</th><th scope="col">Project</th><th scope="col">Amount</th>
        </tr><tr>
            <td>1/1/2011 12:00:00 AM</td><td>MY COMPANY</td><td>1000.99</td>
        </tr><tr>
            <td>2/1/2011 12:00:00 AM</td><td>ABC Company</td><td>1001.99</td>
        </tr><tr>
            <td>1/3/2011 12:00:00 AM</td><td>MY COMPANY</td><td>1002.99</td>
        </tr><tr>
            <td>4/1/2011 12:00:00 AM</td><td>MY COMPANY</td><td>1003.99</td>
        </tr>
    </table>
</div>

解决方案

use selector like this

  <style>
    #ContentPlaceHolderHome_GridView1 td {
     background : #ccc;
   }
  </style>

这篇关于用CSS设计GridView的行和单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！