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

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

您只能在单行 <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>

Answer 2

        <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！ 希望这会有所帮助！