颜色在不同部分的 webgrid 中未正确显示答案

【问题标题】：Color not showing properly in webgrid for different sections颜色在不同部分的 webgrid 中未正确显示
【发布时间】：2019-11-29 23:46:01
【问题描述】：

我正在尝试在 webgrid 中获取部分状态颜色并将其按百分比划分，但它不适用于某些行

部分状态的webgrid cshtml脚本写在下面。

webGrid.Column(header: "Section Status", format: @
    <table class="" cellpadding="5" cellspacing="0" style="width: 100%;">
       <tbody>
          <tr>
             <td id="inProgresswd" width="@item.InProgressPC%" title="@item.InProgressPC%"></td>
             <td id="respPendingwd" width="@item.ResponsePendingPC%" title="@item.ResponsePendingPC%"></td>
             <td id="revPendingwd" width="@item.ReviewPendingPC%" title="@item.ReviewPendingPC%"></td>
             <td id="acceptedwd" width="@item.AcceptedPC%" title="@item.AcceptedPC%"></td>
             <td id="rejectedwd" width="@item.RejectedPC%" title="@item.RejectedPC%"></td>
             <td id="ftReciverwd" width="@item.FwdToRecieverPC%" title="@item.FwdToRecieverPC%"></td>
          </tr>
       </tbody>
    </table>
    , style: "SectionStatus"),

颜色应以 % 方式显示，对于零 %，颜色不应出现在网格中。如图所示，只有 4 种状态颜色应显示为 4 的百分比值为 25。但 5 种颜色显示为突出显示的行

【问题讨论】：

标签： html css asp.net-mvc grid webgrid

【解决方案1】：

table-layout: fixed 应该可以解决您的问题，但是如果您使用 html 宽度属性而不是 css，有时仍然会有 1px 宽的单元格。

table {
  table-layout: fixed;
}

tr > td#inProgresswd {
  background: #faa;
}

tr > td#respPendingwd {
  background: #afa;
}

tr > td#revPendingwd {
  background: #aaf;
}

tr > td#acceptedwd {
  background: #ffa;
}

tr > td#rejectedwd {
  background: #aff;
}

tr > td#ftReciverwd {
  background: #faf;
}

<table cellpadding="5" cellspacing="0" style="width: 100%;">
  <tbody>
    <tr>
      <td id="inProgresswd" width="25%" title="25%"></td>
      <td id="respPendingwd" width="0%" title="0%"></td>
      <td id="revPendingwd" width="0%" title="0%"></td>
      <td id="acceptedwd" width="25%" title="25%"></td>
      <td id="rejectedwd" width="25%" title="25%"></td>
      <td id="ftReciverwd" width="25%" title="25%"></td>
    </tr>
  </tbody>
</table>

<br />

<table cellpadding="5" cellspacing="0" style="width: 100%;">
  <tbody>
    <tr>
      <td id="inProgresswd" style="width: 25%;" title="25%"></td>
      <td id="respPendingwd" style="width: 0%;" title="0%"></td>
      <td id="revPendingwd" style="width: 0%;" title="0%"></td>
      <td id="acceptedwd" style="width: 25%;" title="25%"></td>
      <td id="rejectedwd" style="width: 25%;" title="25%"></td>
      <td id="ftReciverwd" style="width: 25%;" title="25%"></td>
    </tr>
  </tbody>
</table>

【讨论】：