如何将行顶部和底部边距添加到ASP.NET GridView

Question

没有任何属性诸如cellpadding或cellspacing可以为我完成此操作，当我尝试将CSS添加到网格TR上以更改顶部和底部边缘时，它们就会被忽略。如何在GridView中添加每个生成的行之间的间距？

Answer 1

保证金在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>

Answer 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">