我有一个asp.net css友好的网格视图适配器。它看起来像左侧图像。但我需要让它与右侧图像完全一样,行之间有间隙。
我也在这里使用了bootstrap 3.
这是我的网格视图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>
由于
答案 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;
}