Question

The below table code in razor in a MVC View, generates a standard table lay out of rows and columns. What I am looking for is a way to style the rows so that they look different…. like a customised divs that have rounded corners and with color etc… Basically I dont want it look like a table at all, I want the data outputted in blocks/chunks (?) (one block for one row).. I hope I am making this easy to understand… for example a typical google page when you search has options on the left to click (for images, news, Videos etc) and once you click on a link the list on the right pane changes with entries .. I want my rows to look like that ..like blocks of data and not as a row and column structure…

<table>


  @foreach (var item in Model)
 {

<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Name)
    </td>

    <td>
        @Html.DisplayFor(modelItem => item.Descr)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Number)
    </td>


</tr>
}
 }

  </table>

Answer 1

I would suggest you don’t use tables. If you want maximum flexibility, you’re better off using <div> and <ul> elements and styling them accordingly, e.g.:

<ul class="item">
    <li>
        <div class="name">@Html.DisplayFor(m => m.Name)</div>
        <div class="description">@Html.DisplayFor(m => m.Descr)</div>
        <div class="number">@Html.DisplayFor(m => m.Number)</div>
    </li>
</ul>