Пространство между рядами таблицы

Question

Это должно быть простой проблемой, но мне тяжело заставить 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>

Answer 1

Во-первых, я думаю, вам нужно использовать элемент управления GridView . Затем в разметке обязательно установите cellpadding и cellspacing в ноль, а затем примените следующий CSS ...

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

Answer 2

GridView визуализируются как таблицы, и для упрощения интервала измените отступы между столбцами таблицы. Сначала создайте имя основного CSS для GridView:

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

, затем в css измените заполнение столбцов таблицы по желанию:

`.MyGridView{
border: none;

}

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

 }

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

  }`

Answer 3

Попробуйте установить атрибуты DataList CellPadding и CellSpacing на ноль.

Answer 4

Этот очень удобен для выяснения этих проблем.

Answer 5

Я считаю, что вы ищете:

 border-collapse: collapse;

Разрушает прилегающие границы в одну.