Question

只是想知道是否有人可以提出一种方法来更好地实现我正在使用以下标记执行的操作？

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
        <ItemTemplate>
            <td>
                <table>
                    <tr>
                        <td>Description:</td>
                        <td>Start time:</td>
                        <td>End time:</td>
                        <td>Game type:</td>
                    </tr>
                    <tr>
                        <td><%# Eval("Description") %></td>
                        <td><%# Eval("StartTime") %></td>
                        <td><%# Eval("EndTime") %></td>
                        <td><%# Eval("GameType") %></td>
                    </tr>
                </table>
            </td>
        </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

有没有更好的方法来实现我想要的输出？

Answer 1

您的代码将创建一行，您可能需要水平滚动才能看到所有项目

尝试使用div之类的内容

<asp:Repeater ID="rptGames" runat="server">
<HeaderTemplate>
  <div class="lists">
</HeaderTemplate>
    <ItemTemplate>
        <div>
            <table>
                <tr>
                    <td>Description:</td>
                    <td>Start time:</td>
                    <td>End time:</td>
                    <td>Game type:</td>
                </tr>
                <tr>
                    <td><%# Eval("Description") %></td>
                    <td><%# Eval("StartTime") %></td>
                    <td><%# Eval("EndTime") %></td>
                    <td><%# Eval("GameType") %></td>
                </tr>
            </table>
          </div>
    </ItemTemplate>
<FooterTemplate>
   </div>
</FooterTemplate>
</asp:Repeater>

将这些类添加到CSS文件

.lists
{
left:0;
width: 900px;
    list-style: none;
}
.lists div
{
display:inline;
float:left;
margin-left:20px;
margin-bottom:30px;
width:280px;
}

您可以根据设计调整边距，填充和宽度值

Answer 2

我这样做的方法是使用DataList并将表格放在项目模板中，并将列数设置为2或者想要连续出现多少列。

<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
    <ItemTemplate>
        <table>
            <tr>
                <td>Description:</td>
                <td>Start time:</td>
                <td>End time:</td>
                <td>Game type:</td>
            </tr>
            <tr>
                <td><%# Eval("Description") %></td>
                <td><%# Eval("StartTime") %></td>
                <td><%# Eval("EndTime") %></td>
                <td><%# Eval("GameType") %></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

在中继器中并排放置多个表

2 个答案: