Wie man oberen und unteren Rand der Reihe asp.net Gridview hinzufügt?

Question

Es gibt keine Attribute wie CellPadding oder CellSpacing, die dies für mich erreichen, und wenn ich versuche, den Gittertrips CSS hinzuzufügen, um den oberen und unteren Rand zu ändern, werden sie ignoriert. Wie füge ich ein wenig Abstand zwischen jeder generierten Zeile aus der Gridview hinzu?

Answer 1

Margin funktioniert nicht auf table Elemente verwenden padding, oder wie unten Probe in, stellen Sie einen oberen und/oder unteren Rand auf Ihrem tr

table { 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    background: gray; 
 
} 
 
tr { 
 
    border: 0px solid white; 
 
    border-width: 10px 0; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     Hello there 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     Hello there 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     Hello there 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Sie können auch erreichen dies unter Verwendung

border-collapse: separate; 
border-spacing: 0 10px; 

Snippet

table.grey-theme { 
 
    border-collapse: separate; 
 
    border-spacing: 0 10px; 
 
    margin: 50px; 
 
} 
 

 
table.grey-theme td { 
 
    border: solid #777 1px; 
 
    padding: 5px; 
 
}

<table class="grey-theme"> 
 
    <tr> 
 
    <td>Dogs</td> 
 
    <td>10</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Cats</td> 
 
    <td>20</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Parrots</td> 
 
    <td>30</td> 
 
    </tr> 
 
</table>

es in asp:GridView wie

<asp:GridView ID="PetGrid" runat="server" CssClass="grey-theme">