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 box对齐;

所以：

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

明确填充HTML表格列

1 个答案: