如何在给定高度的HTML表格上绘制一条线

Question

在基于引导程序的网页上，我显示下表：

这是使用以下代码生成的：

<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>

我仍然需要添加一个功能：我必须在同一个表中显示估计值。

估算值基于平均值，比如我们每天有25个订单，然后在您预计有250个订单的那天。这250是我想在同一张桌子上显示的值。

我想在表格中绘制一条线@可以找到估计值，并在线上添加标签。

这里有人能解释我如何最好地完成这项工作吗？

Answer 1

不确定您是否将此视为“＆＃39;”行。但我相信它是解决您问题的合适方案。只需更改＆lt; tr＆gt;的类别即可对于平均行。

  @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>
           }

然后为average-row

添加CSS规则

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

更新：

请在此处查看答案 Linethrough/strikethrough a whole HTML table row

所以对你来说

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>
           }