html - 不同部分的颜色在 webgrid 中显示不正确

Question

我正在尝试获取 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 种颜色显示为突出显示的行

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