Make dynamic creation of a table in a form when there is not enough element in a row

Question

I work with asp.net MVC. I am dynamically generating a table with 5 elements per row in my view. But I have a problem, when the model lacks 5 elements, the width of the elements will increase to fill the line, as shown below:

| x | x | x | x | x | (when have >=5 item)

|    x    |    x    | (when have <5 item, in this case is 2)

| x | x |             (what I want to display) 

This is my cshtml code:

<table style="width:100%;height:100%">
    @{
        int count = 0;
        foreach (var thread in Model)
        {
            if (count % 5 == 0)
            {
                @:<tr>
            }
            <td style="width:20%">
                //thread details here
            </td>
            count++;
            if (count % 5 == 0)
            {
                @:</tr>
            }
        }
    }
</table>

I can change to 2 elements per line or use the width of the title, but that is not my goal. Can you suggest me a way to improve my table?

Answer 1

I solved this by adding a more empty line <td>in the line if my objects are less than 5. Now it is displayed as I want

<table style="width:100%;height:100%">
@{
    int count = 0;
    foreach (var thread in Model)
    {
        if (count % 5 == 0)
        {
            @:<tr>
        }
        <td style="width:20%">
            //thread details here
        </td>
        count++;
        if (count % 5 == 0)
        {
            @:</tr>
        }
    }
    while (count%5!=0)
    {
        <td></td>
        count++;
    }
    @:</tr>
}
</table>