如何使用css友好适配器在asp.net网格视图之间形成最大差距?

时间:2014-08-17 08:16:44

标签: asp.net twitter-bootstrap

我有一个asp.net css友好的网格视图适配器。它看起来像左侧图像。但我需要让它与右侧图像完全一样,行之间有间隙。

我也在这里使用了bootstrap 3.

enter image description here

这是我的网格视图css

 .PrettyGridView .AspNet-GridView {
        font-size: 12px;
        line-height: 12px;
        margin-left: 6px;
        width: 95%;
    }

        .PrettyGridView .AspNet-GridView div.AspNet-GridView-Pagination, .PrettyGridView .AspNet-GridView div.AspNet-GridView-Pagination a, .PrettyGridView .AspNet-GridView div.AspNet-GridView-Pagination span {
            color: #00FFFF;
            background: #F5F5F5;
            font-weight: normal;
            padding: 2px;
        }

        .PrettyGridView .AspNet-GridView table {
            border: solid 1px #CCCCCC;
            width: 100%;
        }

    thead {
        display: table-header-group;
        vertical-align: middle;
        border-color: inherit;
    }

    tbody {
        display: table-row-group;
        vertical-align: middle;
        border-color: inherit;
    }

    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }

    .PrettyGridView .AspNet-GridView table tbody tr td {
        color: #333333;
        background: #F5F5F5;
        padding: 2px 20px 2px 2px;
        border-bottom: solid 1px #CCCCCC;
        border-right: solid 0px #CCCCCC;
        text-align: left;
    }

    td, th {
        display: table-cell;
        vertical-align: inherit;
    }

我没有现场直播给你。但是任何人都知道如何实现这一点非常有帮助。这是我的网格视图

  <div class="PrettyGridView">
                                    <asp:GridView ID="VandvaerkGridView" runat="server" ShowHeader="False"
                                        AutoGenerateColumns="False"
                                        Width="100%" CssClass="AspNet-GridView">
                                        <Columns>
                                            <asp:TemplateField>
                                                <ItemTemplate>

                                                    <a href="javascript:void(0);" onclick="PopupCenter('pdf/reports/<%# Eval("fileName") %>', 'myPop1',794,842);">
                                                        <asp:Image ID="ImgPDF" runat="server" ImageUrl='<%# "~/Images/" + Eval("type")%>' Style="padding-left: 10px;" />
                                                    </a>
                                                    <asp:Label ID="lblFileName" runat="server" Text='<%# Eval("fileName") %>' Visible="false"></asp:Label>
                                                </ItemTemplate>

                                                <ItemStyle></ItemStyle>
                                            </asp:TemplateField> 
                                        </Columns>
                                    </asp:GridView>
                                </div>

由于

1 个答案:

答案 0 :(得分:0)

将TD内容包含在“内部”类的div中,并将边框放在div上并给它留一点余量,类似

.PrettyGridView .AspNet-GridView table tbody tr td {
        color: #333333;
        background: #F5F5F5;
        padding: 2px 20px 2px 2px;
        text-align: left;
    }
  .PrettyGridView .AspNet-GridView table tbody tr td div.Inner {
        border-bottom: solid 1px #CCCCCC;
        border-right: solid 0px #CCCCCC;
        margin:5px 0;
  }