Multiple tables side by side in repeater

Just wondering if anyone can suggest a way to better implement what I am doing with the following markup?

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
        <ItemTemplate>
            <td>
                <table>
                    <tr>
                        <td>Description:</td>
          开发者_StackOverflow              <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>

Is there a better way of achieving my desired output?

your code will create one row and you may have to scroll horizontally to see all items

Try to do it using divs something like this

<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>

Add these classes to your CSS file

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

you can adjust values of margin , padding, and width according to your design

The way I would do it would be to use the DataList and put the table in the item template and set the number of columns to 2 or however many you wanted to appear in a row.

<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>