如何在给定高度的 HTML 表格上画一条线答案

【问题标题】：How do I draw a line on an HTML table on a given height如何在给定高度的 HTML 表格上画一条线
【发布时间】：2016-11-07 12:13:52
【问题描述】：

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

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

<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 是我想在同一张表上显示的值。

我正在考虑在表格中画一条线@可以找到估计值的级别，并在该线上添加一个标签。

这里有人可以解释一下如何最好地完成这项工作吗？

【问题讨论】：

你是指另一列吗？
不，我的意思是实际上在高度上的列中画一条线，这将对应于估计值的值。 :)

标签： asp.net asp.net-mvc

【解决方案1】：

不确定您是否会将其视为“线”，但我相信这是解决您问题的合适方法。只需将

的类更改为平均行。

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

【讨论】：

谢谢，但这并不是我真正想要的。我需要一个估计值可能是多少的“准确”指标。因为在很多情况下，实际值将在与估计值相同的范围内。
我注意到我的帖子中有一个错误，我已经编辑了我的问题以反映修改。
@Fysicus 所以在您的表格截图中，并使用您的示例，250 平均值适用于哪一列？第一栏？如果是这样，你想在第一行之前画一条线吗？
它必须绘制在第二行，在所有列上:)
@Fysicus 你的问题是：你如何确定第二行中间的坐标，然后知道，你如何在那里（在 TR 顶部）放置一条线？