generating a html table with razor. each column in table = 1 row in my datasource

Question

I have a dto that comes from the database that has the following structure:

public class DtoPaymentPlan
{
    public DateTime Date{ get; set; }
    public string Description { get; set; }
    public List<string> Docs { get; set; }
    public decimal Total{ get; set; }
}

I am trying to make an html table with razor, the resulting table uses one of these dtos as each column. normally I generate tables where each element of a list is a row. I have been trying a few ideas out but i cant think of an efficient way of doing this.

the datasource is a List

the output should look someting like this:

Date       |Date        |Date        |Date        |Date

Description|Description |Description |Description |Description 

Docs       |Docs        |Docs        |Docs        |Docs        

Total      |Total       |Total       |Total       |Total

Answer 1

I guess it should look like this:

<table>
        <tr>
            @foreach (DtoPaymentPlan item in List)
            {
                <td>@item.Date</td>
            }
        </tr>
        <tr>
            @foreach (DtoPaymentPlan item in List)
            {
                <td>@item.Description </td>
            }
        </tr>
        <tr>
            @foreach (DtoPaymentPlan item in List)
            {
                <td>
                    @for (int i = 0; i < item.Docs.Count; i++)
                    {
                        @item.Docs[i]+" " + i.ToString();
                    }

                </td>


            }
        </tr>
        <tr>
            @foreach (DtoPaymentPlan item in List)
            {
                <td>@item.Total </td>


            }
        </tr>
    </table>