GridView - Ajouter du rembourrage aux cellules avec CSS - css, asp.net-2.0

J'utilise CSS pour styler un GridView. Tout fonctionne bien sauf le remplissage dans les cellules contenant les données. J’ai cherché sur Google et trouvé plusieurs solutions qui impliquent un autre style sur l’élément lors de l’utilisation de champs liés. Cependant, je n’utilise pas de champs liés. Je me lie à une liste (de MyObject). Comment puis-je ajouter un remplissage autour des données du cellules?

Une quasi-solution consistait à styliser le TR et le TDéléments. Cela fonctionne bien ... jusqu'à ce que j'ajoute la pagination au GridView. Le remplissage s'applique également aux compteurs de pages, ce que je ne souhaite pas. En effet, la ligne de pagination est simplement un autre TR dans le tableau HTML rendu.

Voici un peu de ce que je continue:

.aspx Page:

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

le gridViewHeader classe n’applique pas le remplissage à la ligne TH. gridViewPager classe n’applique pas le remplissage de 0px au code HTML rendu dans le TR "pager".

Réponses:

7 pour la réponse № 1

Vous pouvez ajouter un style similaire à celui-ci.

.gridview td {
padding: 2px;
}

ou ceci pour votre entête

.gridview th {
padding: 2px;
}

---

6 pour la réponse № 2

Ok, je l'ai compris. La clé était de faire en sorte de style .gridViewPager td pour remplacer .gridview td. Le crédit pour la majorité de ce code va à la réponse correcte sélectionnée dans cette publication SO. Voici l'enchalada entière:

.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 pour la réponse № 3

CSS peut être appliqué comme indiqué ci-dessous,

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

---