Olivier Muhring

Olivier Muhring

  • 1.1k
  • 256
  • 8k

How to draw a red line on a HTML table on a certain heighth

Jul 5 2016 11:51 AM
On a bootstrap based web page I'm displaying the following table
 
This was generated with the following code:
  1. <div class="row">  
  2.    <div class="col-lg-12">  
  3.       <div class="table-responsive">  
  4.          <table class="table table-bordered table-hover table-striped">  
  5.             <thead>  
  6.                <tr>  
  7.                   <th class="text-right success">Count</th>  
  8.                   <th class="text-right success">Lower</th>  
  9.                   <th class="text-right success">Upper</th>  
  10.                   <th class="text-right success">Price</th>  
  11.                   <th class="text-right success">Cost</th>  
  12.                </tr>  
  13.             </thead>  
  14.             <tbody>  
  15.                @foreach (var dataRow in staffelData)  
  16.                {  
  17.                   var differenceWithUpper = 0;  
  18.                   if (dataRow.Upper.HasValue)  
  19.                   {  
  20.                      differenceWithUpper = countValue - dataRow.Upper.Value;  
  21.                   }  
  22.                   else  
  23.                   {  
  24.                      differenceWithUpper = -1;  
  25.                   }  
  26.                   var cost = 0.0;  
  27.                   var inScope = 0;  
  28.    
  29.                   if (differenceWithUpper >= 0)  
  30.                   {  
  31.                      inScope = dataRow.Upper.Value;  
  32.                   }  
  33.                   else  
  34.                   {  
  35.                      if (countValue >= dataRow.Lower.Value)  
  36.                      {  
  37.                         inScope = countValue - dataRow.Lower.Value;  
  38.                      }  
  39.                   }  
  40.   
  41.                   cost = inScope * Decimal.ToDouble(@dataRow.PnrFee);  
  42.    
  43.                   <tr>  
  44.                      <td class="text-right fit">@pnrsInScope</td>  
  45.                      @if (@dataRow.Lower.HasValue)  
  46.                      {  
  47.                         <td class="text-right fit">@dataRow.Lower.Value</td>  
  48.                      }  
  49.                      else  
  50.                      {  
  51.                         <td class="text-right fit">N/A</td>  
  52.                      }  
  53.                      @if (@dataRow.Upper.HasValue)  
  54.                      {  
  55.                         <td class="text-right fit">@dataRow.Upper.Value</td>  
  56.                      }  
  57.                      else  
  58.                      {  
  59.                         <td class="text-right fit">N/A</td>  
  60.                      }  
  61.                      <td class="text-right fit">@dataRow.Fee @dataRow.Currency</td>  
  62.                      <td class="text-right fit">@cost @dataRow.Currency</td>  
  63.                   </tr>  
  64.                }  
  65.             </tbody>  
  66.          </table>)  
  67.       </div>  
  68.    </div>  
  69. </div>  
I still need 2 add 1 feature though: I have to display an average value in the same table. I was thinking to draw a line @ the level in the table the average can be found.
Could anyone here explain me how to best get this done

Answers (3)