How do I draw a line on an HTML table on a given height

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 to add one feature though: I have to display an estimated value in the same table.

The estimated value is based on the average, say we have 25 orders a day, then on day you'd expect to have 250 orders. This 250 is the value I want to display on the same table.

I was thinking to draw a line @ the level in the table the estimated value can be found, and adding a label to the line.

Could anyone here explain me how to best get this done?

No I mean actually drawing a line in a column on the height which would correspond to the estimated value's value. :) — Fysicus, Jul 05 '16 at 17:33

score 0 · Answer 1 · edited May 23 '17 at 10:28

Not sure if you would count this as a 'line' but I believe it's a suitable solution to your problem. Just change the class of your <tr> for the average row.

  @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);

              @if (...this row is the average...){
              <tr class='average-row'>
              } else {
              <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>
           }

and then add a CSS rule for average-row

.average-row{
  background-color: green;
}

UPDATE:

See the answer here Linethrough/strikethrough a whole HTML table row

So for you

CSS:

table {
border-collapse: collapse;
}

td {
   position: relative;
   padding: 5px 10px;
}

tr.strikeout td:before {
 content: " ";
 position: absolute;
 top: 50%;
 left: 0;
 border-bottom: 1px solid #111;
 width: 100%;

}

HTML:

 @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);

              @if (...this row is the average...){
              <tr class="strikeout">
              } else {
              <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>
           }

Thank you, but it's not really what I'm looking for. I need an "exact" indicator of what the estimated value might be. Indicating the row will not reallyt do the tric since in a lot of cases the actual value will be in the same range as the estimated value. — Fysicus, Jul 06 '16 at 06:21
I noticed an error in my post, I've edited my question to reflect the modification. — Fysicus, Jul 06 '16 at 07:59
@Fysicus so in your table screenshot, and using your example, which column would the 250 average apply to? The first column? If so, you want to draw a line before the first row? — Jim W says reinstate Monica, Jul 06 '16 at 15:19
It would have to be drawn in the 2nd row, over all the columns :) — Fysicus, Jul 06 '16 at 15:39
@Fysicus So are your questions: how do you determine the coords of the middle of the 2nd row, and then knowing that, how do you put a line there (on top of the TR)? — Jim W says reinstate Monica, Jul 06 '16 at 19:15
In a nutshell, yes. Or any help in allowing me to figure this out. I'm rather new to web development :) — Fysicus, Jul 06 '16 at 23:56

How do I draw a line on an HTML table on a given height

1 Answers1