如何将行顶部和底部边距添加到 asp.net gridview？答案

【问题标题】：How to add row top and bottom margins to asp.net gridview?如何将行顶部和底部边距添加到 asp.net gridview？
【发布时间】：2016-06-21 21:02:32
【问题描述】：

没有像 CellPadding 或 CellSpacing 这样的属性可以为我完成此操作，当我尝试将 css 添加到网格 tr 以更改顶部和底部边距时，它们会被忽略。如何在 gridview 生成的每个行之间添加一点间距？

【问题讨论】：

首先：您能否提供一些示例代码，以便我们了解您正在使用什么？第二：尝试在GridView 中设置GridView.ItemTemplate > ItemTemplate.Style，以这种方式对GridViewItem 应用填充或边距？

标签： css asp.net gridview

【解决方案1】：

Margin 不适用于table 元素，请使用padding，或者像下面的示例一样，在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>

【讨论】：

【解决方案2】：

您也可以使用

实现此目的

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

片段

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>

在asp:GridView 喜欢使用它

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

【讨论】：