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テーブルにヘッダーセルを定義します。 - （<th>要素で作成された）ヘッダ情報

スタンダードセルを含む - 含有（<td>要素で作成された）データ

• ヘッダ細胞：
  
  アンHTMLテーブルは、2つのセルの種類を有します
  <th>の要素のテキストは、デフォルトで太字で中央揃えになっています。

• <td>の要素のテキストは、デフォルトでは標準および左揃えです。
  
  

予想通りあなたは、テーブルビューを取得します。なぜあなたはCSSを追加したのか分かりませんでした。それに応じてあなたの列のCSSを追加してください！ これが役立つことを願っています！