Дизайн таблицы Вложенные данные

Question

Я использую коды ниже, чтобы увидеть результат, подобный изображению 1, но результат, подобный изображению 2, идет. Что нужно сделать, чтобы решить это?

код aspx:

<asp:datalist id="dtlUrun" runat="server" RepeatDirection="Horizontal">
            <ItemTemplate>
                <table class="dtlTable">
                    <tr>
                        <td class="dtlHeader"></td>
                        <td class="dtlHeader"><%#DataBinder.Eval(Container.DataItem, "DS_MAMUL")%></td>
                    </tr>
                    <asp:DataList ID="dtlBayi" Runat="server">
                        <ItemTemplate>
                            <tr>
                                <td class="dtlColumn"><%#DataBinder.Eval(Container.DataItem, "DS_BAYI")%></td>
                                <td class="dtlColumn"><%#DataBinder.Eval(Container.DataItem, "MT_MIKTAR")%></td>
                            </tr>
                        </ItemTemplate>
                    </asp:DataList>
                </table>
            </ItemTemplate>
        </asp:datalist>

Style:

    <style type="text/css">

.dtlTable {
    BORDER-RIGHT: #000000 1px solid; 
    BORDER-TOP: #000000 1px solid; 
    BORDER-LEFT: #000000 1px solid; 
    BORDER-BOTTOM: #000000 1px solid; 
    BORDER-COLLAPSE: collapse; 
    BACKGROUND-COLOR: #fafafa; 
    border-spacing: 0px;
}
.dtlColumn {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 8px; 
    FONT-WEIGHT: normal; 
    FONT-SIZE: 0.7em; 
    PADDING-BOTTOM: 4px; 
    COLOR: #404040; 
    PADDING-TOP: 4px; 
    BORDER-BOTTOM: #6699cc 1px dotted; 
    FONT-FAMILY: Verdana, sans-serif, Arial; 
    BACKGROUND-COLOR: #fafafa; 
    TEXT-ALIGN: left;
}
.dtlHeader {
    BORDER-RIGHT: #000000 1px solid; 
    BORDER-TOP: #000000 1px solid; 
    FONT-WEIGHT: bold; 
    FONT-SIZE: 12px; 
    BORDER-LEFT: #000000 1px solid; 
    COLOR: #404040; 
    BORDER-BOTTOM: #000000 1px solid; 
    FONT-FAMILY: Verdana; 
    BACKGROUND-COLOR: #99cccc;
} 

    </script>

VB код:

Private Sub bindGrid()
    Dim objUrun As New caynet_class.cls_LU_MAMUL
    Me.dtlUrun.DataSource = objUrun.GetBy_MAMUL_ARALIGI(Session("CAY_NEVILERI_SATIS_KRITER")("MAMUL_NO1"), Session("CAY_NEVILERI_SATIS_KRITER")("MAMUL_NO2"))
    Me.dtlUrun.DataBind()
End Sub

Private Sub dtlUrun_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dtlUrun.ItemDataBound
    If Not e.Item.ItemIndex = -1 Then
        Dim mamulNo As Integer = CType(DataBinder.Eval(e.Item.DataItem, "MAMUL_NO"), Integer)
        CType(e.Item.FindControl("dtlBayi"), DataList).DataSource = caynet_class.cls_RAPOR_SATIS.Get_Cay_Nevileri_Satis2(mamulNo)
        CType(e.Item.FindControl("dtlBayi"), DataList).DataBind()
        Session("dtlDurum") = False
    End If
End Sub

Изображение 1: http://img146.imageshack.us/my.php?image=89632085xz4.jpg

Picture2: http://img227.imageshack.us/my.php?image=15383944jq6.jpg

Answer 1

Из того, что я могу сказать в коде, первый список данных связан с двумя элементами заголовка, а затем внутри него у вас есть отдельные элементы. Ваш шаблон создает таблицу для каждого раздела, но по умолчанию таблицы будут элементами уровня блока. Я предполагаю, что вы можете исправить это с помощью CSS, но я должен проверить. Лично я бы сделал что-то подобное.

<asp:dataList id="" runat="server">
    <headertemplate>
        <table>
            <tr>
    </headertemplate>
    <itemtemplate>
        <td>
            <!-- Your template here -->
        </td>
    </itemtemplate>
    <footertemplate>
        </tr></table>
    </footertemplate>
</asp:datalist>

Это, по сути, помещает две таблицы в ячейки большой таблицы внутри вашего списка данных.

Answer 2

Тег

в шаблоне заголовка не может видеть его закрывающий тег в шаблоне. Вы уверены, что ваш код верен?

Вы сказали:

Полагаю, что это можно исправить с помощью CSS

Пожалуйста, давайте исправим это с помощью Css:)