使用Html.DisplayForModel时的CSS表格布局

Question

我有一个MVC3视图如下：

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

呈现如下：

<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>

是否有纯CSS方式将其制作成表格布局 - 相当于：

<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>

或者失败了，一个CSS + jQuery解决方案。例如，我可以想象必须有一种方法使用jQuery将每个字段/值对包装在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>
...

然后可以将其设置为表格：

#table
{
    display:table;
}
#table > div
{
    display: table-row;
}
#table .display-label
,#table .display-field
{
    display:table-cell;
}