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

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

我想要显示的表是这样的：

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>

来源

2017-02-25 Swapna

您可以循环在单列<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>

来源

2017-02-25 06:08:40

从0开始的值，你可以从1.binid 0,1,2,3 .. – Swapna

添加+1到@ {item.i + 1} @ {item.i + 1} –

其显示0 + 1 – Swapna

 <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！希望这有助于！

来源

2017-02-25 06:02:25

开始标签丢失TR .. – Swapna

列我所做的编辑。这是一个错字：P –

谢谢....其工作很好 – Swapna

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

回答

相关问题