Question

我正在获取JSON值并在表格中填充，但我需要在显示表格时将水平样式更改为垂直。我正在使用MVC控制器并更新模型，并将模型数据分配给table.unble以获取第一列中的序列号。

我想像这样显示表格：

    name   deviceid    time      location   status
    1      123         10.50     kolkata    23
    2      2332        11.11     hyderabad  44
    3      333         04.54     chennai    11

    but im getting the table format like this

   name  deviceid      time      location   status
    1      123         10.50     kolkata    23
    1      2332        11.11     hyderabad  44
    1      333         04.54     chennai    11



      <table class="table table-striped">
    <thead>
        <tr class="success">
            <th>Bin id</th>
            <th>device id</th>
            <th>filled in %</th>
            <th>Updated time</th>
            <th>Area</th>

    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr> <td class="success">1</td>
                <td class="success">@item.deviceid</td>
                <td class="danger">@item.Filled.ToString("N2") %</td>
                <td class="info">@item.UpdatedTime</td>
                <td class="warning">@item.Area</td>
            </tr>
        }
    </tbody>
</table>

Answer 1

        <table class="table table-striped">
            <thead>
                <tr class="success">
                    <th>Bin id</th>
                    <th>device id</th>
                    <th>filled in %</th>
                    <th>Updated time</th>
                    <th>Area</th>

            </thead>
            <tbody>
                    @foreach (var item in Model)
                    {
                    <tr>
                        <td class="success">@item.deviceid</td>

                        <td class="danger">@item.Filled.ToString("N2") %</td>    
                        <td class="info">@item.UpdatedTime</td>
                        <td class="warning">@item.Area</td>
                        </tr>
                    }
             </tbody>
        </table>

<th>标记定义HTML表格中的标题单元格。

HTML表有两种单元格：

标题单元格 - 包含标题信息（使用<th>元素创建）
标准单元格 - 包含数据（使用<td>元素创建）
<th>元素中的文本默认为粗体并居中。
<td>元素中的文本默认为常规和左对齐。

您将按预期获得表格视图。我无法弄清楚你为何添加了css。所以相应地添加你的列css！希望这有帮助！

Answer 2

您可以将列循环到单行<tr>

<table class="table table-striped">
  <thead>
    <tr class="success">
        <th class="success">Bin Id</th>
        <th>device id</th>
        <th>filled in %</th>
        <th>Updated time</th>
        <th>Area</th>
    </tr>
  </thead>
  <tbody>
    // here you need the index values for the name column so i am giving i value to first column

    @foreach (var item in Model.Select((value,i) => new {i, value}))
    {
      <tr class="warning">
        <td class="success">@item.i</td>
        <td>@item.value.deviceid</td>
        <td>@item.value.Filled.ToString("N2") %</td>
        <td>@item.value.UpdatedTime</td>
        <td>@item.value.Area</td>
      </tr>
    }     
  </tbody>
</table>

如何在html表中更改水平行到垂直列数据显示

2 个答案: