How to make repeater element scrollable? - asp.net

Question

I have this repeater asp element:
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False" >
<ItemTemplate>
<div class="row1">
<table style="width: 100%">
<tr>
<td rowspan="4" onclick="parent.parent.ZoomToView(<%# Eval("Lon") %>, <%# Eval("Lat") %>, 2500)" style="cursor: pointer;">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="10">
<asp:Image class="toggleRow" ImageUrl="~/Images/vertical-dots.png" runat="server" Width="32"
Height="32" Style="height: 30px; position: relative; float: left; cursor: pointer;" /></td>
</td>
</tr>
<tr class="pointDescArea">
<td>text:</td>
<td rowspan="2">
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
</tr>
<tr class="hidden">
<td>X:</td>
<td><%# Eval("Lon") %></td>
</tr>
<tr class="hidden">
<td>Y:</td>
<td><%# Eval("Lat") %></td>
</tr>
<tr>
</table>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="row2">
<table style="width: 100%">
<tr>
<td rowspan="4" onclick="parent.parent.ZoomToView(<%# Eval("Lon") %>, <%# Eval("Lat") %>, 2500)" style="cursor: pointer;">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="10">
<asp:Image class="toggleRow" ImageUrl="~/Images/vertical-dots.png" runat="server" Width="32"
Height="32" Style="height: 30px; position: relative; float: left; cursor: pointer;" /></td>
</td>
</tr>
<tr class="pointDescArea">
<td>טקסט:</td>
<td rowspan="2">
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
</tr>
<tr class="hidden">
<td>X:</td>
<td><%# Eval("Lon") %></td>
</tr>
<tr class="hidden">
<td>Y:</td>
<td><%# Eval("Lat") %></td>
</tr>
</tr>
</table>
</div>
</AlternatingItemTemplate>
</asp:Repeater>
I need to set it's height to 500px and make scrollable.
How can I make this repeater scrollable vertically?

Answer 1

Put the repeater inside a div, set the div's height and use overflow-y
<div style="height: 500px; overflow-y: scroll;">
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False" >
...
</asp:Repeater>
</div>
Ideally the styling should be in style tags or in a stylesheet, but I'm showing it inline just for demonstration.