Repeater with 2 columns and fixed numbe of rows - how?

I have a requirement to have fixed number of rows (i.e. 10 rows) in a Repeater, with 2 columns. For example, I have a list of 15 items (i.e. Item 1, Item 2, ...Item 16). The repeater must present the data like below:

The first column must be filled up with 10 items before starting to fill the second one.

Please provide suggestions.

Required Output Format:

<pre>
    <table>    
        <tr><td>Item 1</td> <td>Item 11</td></tr>
        <tr><td>Item 2</td> <td>Item 12</td></tr>
        <tr><td>Item 3</td> <td>Item 13</td></tr>
        <tr><td>Item 4</td> <td>Item 14</td></tr>
        <tr><td>Item 5</td> <td>Item 15</td></tr>
        <tr><td>Item 6</td> <td></td></tr>
        <tr><td>Item 7</td> <td></td></tr>
        <tr><td>Item 8</td> <td></td></tr>
        <tr><td>Item 9</td> <td></td></tr>
        <tr><td>Item 10</td> <td></td></tr>
    </table>
</pre>

So far, I have this

Suggestions also welcome on how to do this using a DataList or other data controls.

You can use jQuery to solve it. Here is the solution. If you have events for content then use clone.

$(function(){
var maxRows=6,totalRecords = $("table tr").length,requiredColumns =Math.floor(totalRecords/maxRows)+1,emptyCells=(totalRecords%maxRows);
console.log(emptyCells);
var index=0;
$("table tr").eq(maxRows-1).nextAll("tr").each(function(){	
	if(index==maxRows)
		index=0;
	$("table tr").eq(index).append($(this).html());
	$(this).remove();
	index++;
	
});
$("table tr:nth-child("+ emptyCells+")").nextAll("tr").append("<td></td>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>    
<tr><td>Item 1</td> </tr>
<tr><td>Item 2</td> </tr>
<tr><td>Item 3</td> </tr>
<tr><td>Item 4</td> </tr>
<tr><td>Item 5</td> </tr>
<tr><td>Item 6</td> </tr>
<tr><td>Item 7</td></tr>
<tr><td>Item 8</td></tr>
<tr><td>Item 9</td></tr>
<tr><td>Item 10</td></tr>
<tr><td>Item 11</td> </tr>
<tr><td>Item 12</td> </tr>
<tr><td>Item 13</td> </tr>
<tr><td>Item 14</td> </tr>
<tr><td>Item 15</td> </tr>
<tr><td>Item 16</td> </tr>
</table>

$(function(){
var maxRows=6,totalRecords = $("table tr").length,requiredColumns =Math.floor(totalRecords/maxRows)+1,emptyCells=(totalRecords%maxRows);
console.log(emptyCells);
var index=0;
$("table tr").eq(maxRows-1).nextAll("tr").each(function(){  
    if(index==maxRows)
        index=0;
    $("table tr").eq(index).append($(this).html());
    $(this).remove();
    index++;

});
$("table tr:nth-child("+ emptyCells+")").nextAll("tr").append("<td></td>");
});