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

Question

On a bootstrap based web page I'm displaying the following table

 

This was generated with the following code:

<div class="row">
   <div class="col-lg-12">
      <div class="table-responsive">
         <table class="table table-bordered table-hover table-striped">
            <thead>
               <tr>
                  <th class="text-right success">Count</th>
                  <th class="text-right success">Lower</th>
                  <th class="text-right success">Upper</th>
                  <th class="text-right success">Price</th>
                  <th class="text-right success">Cost</th>
               </tr>
            </thead>
            <tbody>
               @foreach (var dataRow in staffelData)
               {
                  var differenceWithUpper = 0;
                  if (dataRow.Upper.HasValue)
                  {
                     differenceWithUpper = countValue - dataRow.Upper.Value;
                  }
                  else
                  {
                     differenceWithUpper = -1;
                  }
                  var cost = 0.0;
                  var inScope = 0;

                  if (differenceWithUpper >= 0)
                  {
                     inScope = dataRow.Upper.Value;
                  }
                  else
                  {
                     if (countValue >= dataRow.Lower.Value)
                     {
                        inScope = countValue - dataRow.Lower.Value;
                     }
                  }

                  cost = inScope * Decimal.ToDouble(@dataRow.PnrFee);

                  <tr>
                     <td class="text-right fit">@pnrsInScope</td>
                     @if (@dataRow.Lower.HasValue)
                     {
                        <td class="text-right fit">@dataRow.Lower.Value</td>
                     }
                     else
                     {
                        <td class="text-right fit">N/A</td>
                     }
                     @if (@dataRow.Upper.HasValue)
                     {
                        <td class="text-right fit">@dataRow.Upper.Value</td>
                     }
                     else
                     {
                        <td class="text-right fit">N/A</td>
                     }
                     <td class="text-right fit">@dataRow.Fee @dataRow.Currency</td>
                     <td class="text-right fit">@cost @dataRow.Currency</td>
                  </tr>
               }
            </tbody>
         </table>)
      </div>
   </div>
</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

Answer 1

Hi

Try the below link

https://developer.mozilla.org/samples/cssref/border-spacing.html

Answer 2

I made a small error in my original post.

The idea is not to display the average value, but an estimated, expected value based on the average.

Say we have on average 25 orders per day then at day 10 I would expect 250 orders. This is the value I want to display as a thin red line on the table.

Answer 3

Hi oliver,

You can use <tfoot> tag inside your table which is meant for showing aggregate values. their you can add a <hr> tag for a line

for reference,

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody

If I have answered your question, plz mark it as answered