title: how to change horizontal row to vertical column data display in html table
body: <p>I'm getting the JSON value and populating in the table, but I need to change the horizontal style to vertical when displaying the table.  I'm m using an MVC controller and updating the model, and assigning the model data to table.unble to get serial number in my first column.</p>
  
  <p>I want to show the table like this:</p>
  
  <pre><code>    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
  
  
  
        &lt;table class="table table-striped"&gt;
      &lt;thead&gt;
          &lt;tr class="success"&gt;
              &lt;th&gt;Bin id&lt;/th&gt;
              &lt;th&gt;device id&lt;/th&gt;
              &lt;th&gt;filled in %&lt;/th&gt;
              &lt;th&gt;Updated time&lt;/th&gt;
              &lt;th&gt;Area&lt;/th&gt;
  
      &lt;/thead&gt;
      &lt;tbody&gt;
          @foreach (var item in Model)
          {
              &lt;tr&gt; &lt;td class="success"&gt;1&lt;/td&gt;
                  &lt;td class="success"&gt;@item.deviceid&lt;/td&gt;
                  &lt;td class="danger"&gt;@item.Filled.ToString("N2") %&lt;/td&gt;
                  &lt;td class="info"&gt;@item.UpdatedTime&lt;/td&gt;
                  &lt;td class="warning"&gt;@item.Area&lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>