/ / Estilizando as linhas e células de um GridView com CSS - css, gridview, webforms

Estilizando as linhas e células de um GridView com CSS - css, gridview, webforms

Eu quero usar CSS para formatar minhas linhas GridView.

Eu configurei meu GridView no aspx da seguinte forma:

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

Eu defino e vinculo a fonte de dados no code-behind chamando um método para obter meu conjunto de dados de uma camada de acesso a dados.

No entanto, como defino a origem de dados por meio de programação, as linhas e células não têm atributos de id.

Como você pode usar CSS para estilizar e formatar essas linhas e células?

Este é o HTML gerado atualmente:

<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>

Respostas:

3 para resposta № 1

usar seletor como este

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

2 para resposta № 2

Existem algumas maneiras de aplicar o estilo de linha a um gridview.

1) No código por trás você pode aplicar estilos e tal em RowDatabound.

2) Entre as tags gridview você pode usar o:

<asp:GridView ID="GridView1" runat="server">
<rowstyle CssClass="myClass" />
<alternatingrowstyle CssClass="myClass" />
</asp:GridView>

Veja isso página para mais detalhes.


1 para resposta № 3

Modifique sua grade para incluir cada coluna. Aplicar o ItemStyle-CssClass atributo.

<asp:GridView runat="server" AutoGenerateColumns="false" ID="fooGrid" >
<Columns>
<asp:BoundField  ItemStyle-CssClass="fooBarBat"
DataField="MyDataFieldName" HeaderText="Bar" />
</Columns>
</asp:GridView>

1 para resposta № 4

Você pode usar a janela de propriedades para definir a propriedade CssClass para usar uma classe de um CSS. Ou você pode definir as fontes e as cores usando a mesma janela de propriedades.

Propriedades do GridView


0 para a resposta № 5

em gridview você pode definir atributos chamados HeaderCSSClass e CSSClass (não tenho certeza sobre os nomes, pode estar errado. google deles).