2

我有一个 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;
}
4

0 回答 0