GridView - добавление заполнения к ячейкам с помощью CSS - PullRequest
Новая
       14

GridView - добавление заполнения к ячейкам с помощью CSS

3 голосов
/ 05 мая 2010

Я использую CSS для стилизации GridView. У меня все работает нормально, за исключением заполнения в ячейках, которые содержат данные. Я нашел и нашел несколько решений, которые используют другой стиль для элемента при использовании связанных полей. Однако я не использую связанные поля. Я привязан к списку (Of MyObject). Как бы я добавил отступы вокруг данных в ячейках?

Одним из почти решений было стилизовать элементы TR и TD. Это работает нормально ... пока я не добавлю подкачку в GridView. Заполнение также относится к счетчикам страниц, которые я не хочу. Это связано с тем, что строка подкачки - это просто еще один TR в отображаемой таблице HTML.

Вот кое-что из того, что у меня происходит:

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

Класс gridViewHeader не применяет заполнение к строке TH. Класс gridViewPager не применяет заполнение 0px к отображаемому HTML в TR "pager".

Ответы [ 3 ]

7 голосов
/ 05 мая 2010

Хорошо, я понял это. Ключ должен был убедиться, что стиль .gridViewPager td переопределил .gridview td. Кредит для большей части этого кода идет на выбранный правильный ответ в этой публикации SO Вот вся энчалада:

.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;
}
7 голосов
/ 05 мая 2010

Вы можете добавить стиль, похожий на этот. 

.gridview td {
    padding: 2px;
}

или это для вашего заголовка 

.gridview th {
    padding: 2px;
}
0 голосов
/ 14 декабря 2015

CSS можно применять, как показано ниже, 

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