2

I have an MVC3 view as follows:

<div id="table">
    @Html.DisplayForModel()
</div>

which renders as follows:

<div id="table">
    <div class="display-label">Label 1</div>
    <div class="display-field">Value 1</div>
    <div class="display-label">Label 2</div>
    <div class="display-field">Value 2</div>
    ... etc ...
    <div class="display-label">Label n</div>
    <div class="display-field">Value n</div>
</div>

Is there a pure CSS way of making this into a tabular layout - the equivalent of:

<table>
    <tr><td>Label 1</td><td>Value 1</td>
    <tr><td>Label 2</td><td>Value 2</td>
    <tr><td>Label 3</td><td>Value 3</td>
    <tr><td>Label 4</td><td>Value 4</td>
</table>

Or failing that, a CSS + jQuery solution. For example, I could imagine there must be a way using jQuery to wrap each field/value pair in a div:

<div>
    <div class="display-label">Label 1</div>
    <div class="display-field">Value 1</div>
</div>
<div>
    <div class="display-label">Label 1</div>
    <div class="display-field">Value 1</div>
</div>
...

which can then be styled as a table:

#table
{
    display:table;
}
#table > div
{
    display: table-row;
}
#table .display-label
,#table .display-field
{
    display:table-cell;
}
Joe
  • 122,218
  • 32
  • 205
  • 338
  • This may be useful http://stackoverflow.com/a/4943008/122005 – chridam Oct 19 '12 at 11:47
  • @chridam, thanks, but my model isn't a DataTable. I could do something similar to http://haacked.com/archive/2010/05/05/asp-net-mvc-tabular-display-template.aspx but I'm really looking for a CSS solution. – Joe Oct 19 '12 at 11:52
  • Your example seems to be trying to express tabular data with divs, why do you think using the table tag isn't appropriate here? – cimmanon Oct 19 '12 at 12:56
  • @cimmanon - I've nothing against the table tag for this. It's just that I'll have to create my own custom DisplayTemplate to render it as a table. I was wondering if I could achieve the layout I want without creating my own template. – Joe Oct 19 '12 at 13:18
  • CSS isn't for fixing markup, its only for changing the markup's appearance. Proper markup comes first, then comes styling. – cimmanon Oct 19 '12 at 14:15

0 Answers0