Html 表格行之间的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2867307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Space Between Table Rows
提问by AGoodDisplayName
This should be a simple problem, but I am have a tough time getting the html to display the way I want it...
这应该是一个简单的问题，但我很难让 html 以我想要的方式显示......
The problem is the space between my table rows...I don't want space between my rows. I just want my table to look like a spreadsheet with black borders. I am using a datalist and have a table in the datalist control's templates. I have been messing with this for a couple of hours now and I have tried a few different variations of CSS and table attributes. Can anyone tell me where I am going wrong? Below is my current mark up.
问题是我的表格行之间的空间......我不希望我的行之间有空间。我只是想让我的表格看起来像一个带有黑色边框的电子表格。我正在使用数据列表并在数据列表控件的模板中有一个表。我已经搞了几个小时了，我尝试了一些不同的 CSS 和表格属性变体。谁能告诉我我哪里出错了？下面是我目前的标记。
<style type="text/css">
.tdHeader
{
border-color: Black;
border-style: solid;
border-width: 1px;
font-family: Arial;
font-size: 8pt;
margin: 0;
background-color: #DCDCDC;
font-weight: bold;
}
.tdBorder
{
border-color: Black;
border-style: solid;
border-width: 1px;
font-family: Arial;
font-size: 8pt;
margin: 0;
text-align: center;
}
.trNoSpace
{
margin: 0;
padding: 0;
}
</style>
<asp:DataList ID="DataList1" runat="server" DataKeyField="Oid"
DataSourceID="xdsHUDEligibilityMember">
<HeaderTemplate>
<table cellspacing="0" width="600">
<tr class="trNoSpace">
<td class="tdHeader" width="100">Household Member Number
</td>
<td class="tdHeader">Household Member Name
</td>
<td class="tdHeader">Age of Household Member
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="trNoSpace">
<td class="tdBorder">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Oid") %>' />
</td>
<td class="tdBorder">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("FullName") %>' />
</td>
<td class="tdBorder">
<asp:Label ID="AgeAtEffectiveDateLabel" runat="server" Text='<%# Eval("AgeAtEffectiveDate") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tr class="trNoSpace">
<td class="tdBorder">
</td>
<td class="tdBorder">
</td>
<td class="tdBorder">
</td>
</tr>
</table>
</FooterTemplate>
回答by Josh Stodola
First, I think you need to be using the GridViewcontrol. Then in the markup, be sure to set cellpaddingand cellspacingto zero and then apply the following CSS...
首先，我认为您需要使用GridView控件。然后在标记中，确保将cellpadding和cellspacing设置为零，然后应用以下 CSS...
table { border-collapse: collapse; }
table tr, table td, table th { border: solid 1px #000; margin: 0; padding: 0; }
回答by Aren
I believe you're looking for:
我相信你正在寻找：
border-collapse: collapse;
It collapses adjoining borders into one.
它将相邻的边界折叠为一个。
回答by Mark M
Try setting the DataList CellPadding and CellSpacing attributes to zero.
尝试将 DataList CellPadding 和 CellSpacing 属性设置为零。
回答by Oddacon
GridView's are rendered as tables, and to make spacing simple change the padding between the table colums. First create a a main css name for the GridView:
GridView 呈现为表格，为了使间距变得简单，请更改表格列之间的填充。首先为 GridView 创建一个主要的 css 名称：
<asp:GridView ID="GridView1" CssClass="MyGridView" runat="server">
<asp:GridView ID="GridView1" CssClass="MyGridView" runat="server">
then in the css change the table colums padding as desired:
然后在 css 中根据需要更改表列填充：
`.MyGridView{
border: none;
}
.MyGridView tr{
text-align: left;
vertical-align: top;
}
.MyGridView td{
vertical-align: top;
padding-bottom: 100px;
}`
