title: Razor View Html Table layout
body: <p>I have a table in a razor view that is displaying data like so</p>
  
  <p><a href="https://i.stack.imgur.com/cdmQ6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cdmQ6.png" alt="current layout"></a></p>
  
  <p>There are fields that I'd like to group like so</p>
  
  <p><a href="https://i.stack.imgur.com/UOvUk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UOvUk.png" alt="desired layout"></a></p>
  
  <p>I dont think I'm going to achieve this by grouping because I'm going to loose data. Not sure what approach to take?</p>
  
  <p>This is my markup</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
      &lt;table class="arrowes-table table-striped"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Driver Name&lt;/th&gt;
                  &lt;th&gt;Alarm Type : Count&lt;/th&gt;
                  &lt;th&gt;Total Distance For Period&lt;/th&gt;
                  &lt;th&gt;Avg Per Km Driven&lt;/th&gt;
                  &lt;th&gt;Relative Driver Score&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              @foreach (var item in Model.DriverBehaviour.OrderByDescending(x =&gt; x.DriverName))
              {               
                  &lt;tr&gt;
                      &lt;td&gt;@Html.HiddenFor(m =&gt; item.DriverId) @Html.ActionLink(item.DriverName, "Operator", "Operators", new { area = "VehicleManagement", operatorId = item.DriverId })&lt;/td&gt;
                      &lt;td&gt;@item.AlarmType : &lt;span class="brand-red"&gt;@item.TypeCount&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;@item.TotalDistanceForPeriod&lt;/td&gt;
                      &lt;td&gt;
                          @{
                              var avg = @Math.Truncate(1000 * item.AverageAlarmPerKmDriven) / 1000;
                          }
                          @avg
                      &lt;/td&gt;
                      &lt;td&gt;
                          @{
                              var relScore = @Math.Truncate(1000 * @item.RelativeDriverScore) / 1000;
  
                              if (relScore.ToString().StartsWith("-") == true)
                              {
                                  &lt;span class="brand-red"&gt;@relScore&lt;/span&gt;
                              }
                              if (relScore.ToString().StartsWith("-") == false)
                              {
                                  &lt;span class="brand-green"&gt;+@relScore&lt;/span&gt;
                              }
  
                          }
                      &lt;/td&gt;
                  &lt;/tr&gt;
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for any ideas :)</p>