GridView - Adicionar Padding às Células com CSS - css, asp.net-2.0

Eu estou usando CSS para estilizar um GridView. Eu tenho tudo funcionando bem, exceto para o preenchimento nas células que contêm os dados. Eu pesquisei e encontrei várias soluções que envolvem outro estilo no Item ao usar campos vinculados. No entanto, eu não estou usando campos vinculados. Eu estou vinculando a uma lista (Of MyObject). Como eu adicionaria preenchimento em torno dos dados no células?

Uma quase solução foi estilizar o TR e o TDelementos. Isso funciona bem ... até eu adicionar paginação ao GridView. O preenchimento também se aplica aos contadores de página, que eu não quero. Isso ocorre porque a linha de paginação é apenas outra TR na tabela HTML renderizada.

Aqui está um pouco do que eu estou fazendo:

Página .aspx:

        <asp:GridView ID="gvTerritories"
runat="server"
CssClass="gridview"
AutoGenerateSelectButton="True"
GridLines="None"
AllowPaging="true"
PageSize="10">
<HeaderStyle CssClass="gridViewHeader" />
<RowStyle CssClass="gridViewRow" />
<AlternatingRowStyle CssClass="gridViewAltRow" />
<SelectedRowStyle CssClass="gridViewSelectedRow" />
<PagerStyle CssClass="gridViewPager" />
</asp:GridView>

CSS:

.gridview {
font-family: Arial;
background-color: #FFFFFF;
border: solid 1px #CCCCCC;
}

.gridViewHeader {
background-color: #0066CC;
color: #FFFFFF;
padding: 4px 50px 4px 4px;
text-align: left;
border-width: 0px;
border-collapse: collapse;
}

.gridViewRow {
background-color: #99CCFF;
color: #000000;
border-width: 0px;
border-collapse: collapse;
}

.gridViewAltRow {
background-color: #FFFFFF;
border-width: 0px;
border-collapse: collapse;
}

.gridViewSelectedRow {
background-color: #FFCC00;
color: #666666;
border-width: 0px;
border-collapse: collapse;
}

.gridViewPager
{
background-color: #0066CC;
color: #FFFFFF;
text-align: left;
padding: 0px;
}

o gridViewHeader A classe não aplica o preenchimento à linha TH. gridViewPager class não aplica o preenchimento de 0px ao HTML renderizado no TR do "pager".

Respostas:

7 para resposta № 1

Você pode adicionar um estilo semelhante a este.

.gridview td {
padding: 2px;
}

ou isso para o seu cabeçalho

.gridview th {
padding: 2px;
}

---

6 para resposta № 2

Ok, eu percebi isso. A chave era ter certeza de estilo .gridViewPager td substituir .gridview td. O crédito para a maioria deste código vai para a resposta correta selecionada esta postagem SO. Aqui está toda a enchalada:

.aspx:

<asp:GridView ID="gvTerritories"
runat="server"
CssClass="gridview"
AutoGenerateSelectButton="True"
GridLines="None"
AllowPaging="true"
PageSize="10">
<HeaderStyle CssClass="gridViewHeader" />
<RowStyle CssClass="gridViewRow" />
<AlternatingRowStyle CssClass="gridViewAltRow" />
<SelectedRowStyle CssClass="gridViewSelectedRow" />
<PagerStyle CssClass="gridViewPager" />
</asp:GridView>

CSS:

.gridview {
font-family: Arial;
background-color: #FFFFFF;
border: solid 1px #CCCCCC;
}

.gridview td  {
padding: 5px 50px 5px 5px;
}

.gridview th {
padding: 5px 50px 5px 5px;
text-align: left;
}

.gridview th a{
color: #003300;
text-decoration: none;
}

.gridview th a:hover{
color: #003300;
text-decoration: underline;
}

.gridview td a{
color: #003300;
text-decoration: none;
}

.gridview td a:hover {
color: red;
text-decoration:underline;
}

.gridViewHeader {
background-color: #0066CC;
color: #FFFFFF;
text-align: left;
}

.gridViewRow {
background-color: #99CCFF;
color: #000000;
}

.gridViewAltRow {
background-color: #FFFFFF;
}

.gridViewSelectedRow {
background-color: #FFCC00;
color: #666666;
}

/* Of course, this doesn"t work with IE6. Works fine with Firefox, though. */
.gridview tr.gridViewRow:hover td, .gridview tr.gridViewAltRow:hover td {
background-color: #CCCCCC;
color: #000000;
}

.gridViewPager
{
background-color: #0066CC;
color: #FFFFFF;
text-align: left;
}

.gridViewPager td  {
padding: 3px;
}

.gridViewPager td a {
color: #FFFFFF;
text-decoration: none;
}

.gridViewPager td a:hover {
color: #FFFFFF;
text-decoration: underline;
}

/* The currently selected page number is rendered by ASP.NET in a span tag in the td. */
.gridViewPager span {
color: #000000;
}

#divGridView {
margin-top: 1.5em;
}

---

0 para resposta № 3

CSS pode ser aplicado como mostrado abaixo,

<asp:BoundField DataField="SNo" HeaderText="S. No">
<ItemStyle CssClass="YourCSS" />
</asp:BoundField>

---