jquery - 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;
}