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

Question

我正在获取 JSON 值并填充到表格中，但我需要在显示表格时将水平样式更改为垂直样式。我正在使用 MVC Controller 并更新模型，并将模型数据分配给 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>中的文字默认情况下，元素是规则的和左对齐的。
  
  

您将获得预期的表格 View 。我不明白你为什么添加了 css。所以相应地添加你的列CSS!希望这对您有所帮助!