Multiple tables side by side in repeater

Question

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

Answer 1

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