css - 进度条作为表格背景

Question

我有一个显示人员列表的 HTML 表格。对于每一行，我希望有一个不同的类似进度条的背景。有点像

<table>
  <tr class="progress-full">...</tr>
  <tr class="progress-half">...</tr>
  <tr class="progress-quarter">...</tr>
</table>

第一行的整个背景为彩色，第二行的一半和最后一行的 1/4(使用类或直接使用 CSS 中的百分比)。

我尝试使用宽度为 ( like here) 的背景，但没有成功。我可以在 tr 中包含一个 div 吗？当我检查 html 代码(例如:使用 chrome)时，div 似乎在表格之外。

<table style="width: 300px;">
      <tr style="width: 75%; background: rgb(128, 177, 133);">
        <div style="width: 300px;">...</div>
      </tr>
      <tr style="width: 50%; background: rgb(128, 177, 133);">
        <div style="width: 300px;">...</div>
      </tr>
</table>

或者另一种方法？

Answer 1

如果您使用 CSS ::before，您可以避免在表格中添加任何额外的标记。或 ::after pseudo-elements .您可以为每个表格行提供透明背景，并为伪元素提供您想要的宽度。

这是一个 jsfiddle example .

HTML:

<table>
    <tr class="progress-full">
        <td>Row 1 Col 1</td>
    </tr>
    <tr class="progress-quarter">
        <td>Row 2 Col 1</td>
    </tr>
    <tr class="progress-half">
        <td>Row 3 Col 1</td>
    </tr>
</table>

CSS:

td { padding: 10px; }

tr.progress-full td:first-child,
tr.progress-half td:first-child,
tr.progress-quarter td:first-child {
    position: relative;
}
tr.progress-full td:first-child::before,
tr.progress-half td:first-child::before,
tr.progress-quarter td:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: red;
    z-index: -1;
}

tr.progress-full td:first-child::before {
    width: 100%;
}
tr.progress-half td:first-child::before {
    width: 50%;
}
tr.progress-quarter td:first-child::before {
    width: 25%;
}

此 CSS 可以精简，具体取决于表格结构的可变程度。我将样式应用于每个 tr 中的第一个 td。如果您需要进度条跨越多个 td，请使用大于 100% 的宽度。