航天表行

這之間應該是一個簡單的問題，但我有一個艱難的時間獲得HTML，以顯示我想要的方式...航天表行

問題是我的錶行之間的空間......我不希望我的行之間有空間。我只想讓我的桌子看起來像一個黑色邊框的電子表格。我正在使用datalist並在datalist控件的模板中有一個表。我一直在這裏搞了幾個小時，我嘗試了幾種不同的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>

來源

2010-05-19 AGoodDisplayName

首先，我認爲你需要使用GridView控件。然後在標記，一定要設置cellpadding和cellspacing到零，然後應用下面的CSS ...

table { border-collapse: collapse; } 
table tr, table td, table th { border: solid 1px #000; margin: 0; padding: 0; }

來源

2010-05-19 16:17:51

雖然它會錯誤地告訴我，我無法得到這個在datalist中工作，我應該首先考慮使用gridview。這工作，謝謝。 – AGoodDisplayName 2010-05-19 16:33:09

@AGoodDisplayName我認爲你可能*可以讓它與DataList一起工作，但這是一個更合適的解決方案，IMO – 2010-05-19 17:54:48

是的，我認爲它最終可能已經算出來了，但是值多少時間？再次感謝。 – AGoodDisplayName 2010-05-19 19:10:36

我相信你正在尋找：

border-collapse: collapse;

它縮短了相鄰的邊界爲一體。

來源

2010-05-19 16:12:09 Aren

這正常工作，但它在我的標記沒有。謝謝。 – AGoodDisplayName 2010-05-19 16:32:49

嘗試將DataList CellPadding和CellSpacing屬性設置爲零。

來源

2010-05-19 16:14:29

試過這沒用，但謝謝。 – AGoodDisplayName 2010-05-19 16:29:59

This對於解決這些問題非常方便。

來源

2010-05-19 16:16:45

這很方便，我得到的樣本表按照我想要的樣子出現，但是當我將css應用於標記時，它並未解決問題。不過謝謝。 – AGoodDisplayName 2010-05-19 16:31:08

GridView的呈現爲表，以使間距簡單變化表colums之間的填充。首先爲GridView創造出一個主要的CSS名稱：

<asp:GridView ID="GridView1" CssClass="MyGridView" runat="server">

然後在CSS根據需要更改表colums填充：

`.MyGridView{ 
border: none; 

} 

.MyGridView tr{ 
    text-align: left; 
    vertical-align: top; 

} 

.MyGridView td{ 
    vertical-align: top; 
padding-bottom: 100px; 

    }`

來源

2013-02-10 07:32:22 Oddacon

回答

相關問題