填充HTML表列wise

Question

从先前提出的问题来看，他们中的大多数显然对这个问题的回答是否定的。但是，我想应该有一种方法，我可以填充HTML表所需的方式。

我有一个HTML表，可以使它按行填充，但我希望消除所显示的属性名称的重复。

我有在逐行填充和结果输出中工作的代码。我尝试过同样的列智慧，但我看不出我可以在哪里填充这些值。

表中的值是从数据库中填充的。

按行填充表的代码。

<table class="table">
    <tr>
        <th>Delete</th>
        <th>Option Value</th>
        <th colspan="3">Set Value</th>
        @*<th></th>
        <th></th>
        <th></th>*@
    </tr>
    @foreach (var item in Model.OptionValues)
    {
        //var row = @item.SetValue.Count + 1;
        if (item.SetValue.Count == 0)
        {   @:<tr>
            @:<td>@Html.ActionLink("Delete", "Delete", "Optionvalues", new { id = item.OptionValueID},null)</td>
            @:<td>@item.OptionVal</td>
            @:<td></td>
            @:</tr> 
    }
        int count = 0;
    if(item.SetValue.Count!=0)
    {
        @:<tr>
            @:<td rowspan="@item.SetValue.Count">@Html.ActionLink("Delete", "Delete", "Optionvalues", new { id = item.OptionValueID},null)</td>
            @:<td rowspan="@item.SetValue.Count">@item.OptionVal</td>

            foreach(var set in item.SetValue)
            {
                if (count ==0)
                {
                @:<td>@set.TcSet.SetName</td>
                @:<td>@set.Value</td>
                @:<td>@set.Status</td>
                @:<td>@Html.ActionLink("Edit", "Edit", "SetValues", new { id = set.SetValueID },null)</td>
                @:</tr>
                }
                else
                {
                    @:<tr>
                    @:<td>@set.TcSet.SetName</td>
                    @:<td> @set.Value</td>
                    @:<td>@set.Status</td>
                    @:<td>@Html.ActionLink("Edit", "Edit", "SetValues", new { id = set.SetValueID },null)</td>
                }
                count++;

            }
            }
         @:</tr>
    } 
</table>

结果表的输出

​

​

预期输出

​

​

我可以用属性名填充第一列。但我不知道如何在下一篇专栏中填充这些值。

我尝试了一个foreach循环，但是我无法按列填充值。

手头的任务还有工作要做吗？

更新

根据“Nick”的建议，我尝试了以下方法

 @foreach(var ov in Model.OptionValues)
 {
 <div class="col">@ov.OptionVal</div>
 foreach(var s in ov.SetValue)
 {
    <div class="row">@s.Value</div>
 }
 }

Answer 1

你必须使用表格布局吗？您可以简单地使用块元素，并将它们与css列或css flex框对齐；

所以：

`@foreach (var i in Model)
    {
div.column
 @foreach (var set in i)
    {
   div.row-in-col
    } 
}` 

然后在css中

`.element-that-contains-columns{
 display:flex;
}
.row-in-col {
height : @some-fixed-height;
}`

会产生这样的结果：

​

.container{display:flex}
.row{
  height:30px;
  padding:4px
}

<div class="container">
	<div class="col">
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
	</div>
	<div class="col">
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
	</div>
	<div class="col">
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
	</div>
	<div class="col">
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
	</div>
	<div class="col">
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
	</div>
	<div class="col">
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
		<div class="row">Lorem</div>
	</div>
</div>

​