CODEWITHSUNDEEP
htmlasp.net.nethtml-tablerepeater
Maxim Gershkovich
Maxim Gershkovich

Reputation: 47199

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

Upvotes: 1

Views: 2553

Answers (2)

Chris Mullins
Chris Mullins

Reputation: 6867

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>

Upvotes: 0

Amir Ismail
Amir Ismail

Reputation: 3883

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

Upvotes: 1

Related Questions