4

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

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

第一行的整个背景是彩色的，第二行的一半和最后一行的 1/4（带有类或直接使用 CSS 中的百分比）。

我尝试使用具有宽度的背景（如这里）但我没有成功。我可以在 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>

或者也许是另一种方法？

4

5 回答 5

5

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

这是一个jsfiddle 示例。

在此处输入图像描述

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 可以被精简，这取决于表结构的可变性。我将样式应用到td每个tr. 如果需要进度条跨越多个tds，请使用大于100%的宽度。

于 2013-04-18T15:14:59.737 回答
1

为什么不简单地将 div 或任何其他合适的容器放入 td 中并为其分配宽度和背景颜色？

如下所示：

<table style="width: 300px;">
      <tr>
          <td>
               <div  class="progress-full" >
                   ...
               </div>
          </td>
      </tr>
      <tr>
          <td >
                <div class="progress-quarter" >
                    ...
                </div>
          </td>
      </tr>
</table>

看这个演示

于 2013-04-18T14:34:27.947 回答
1

把百分比宽度放在div而不是tr（你也错过了tds）

http://jsfiddle.net/WmESh/3/

<table style="width: 300px;">
  <tr>
      <td>
        <div style="width: 75%; background: rgb(128, 177, 133); overflow:visible;">
            <div style="width:300px;">
                ... 
            </div>        
        </div>
      </td>
  </tr>
  <tr>
      <td>
        <div style="width: 50%; background: rgb(128, 177, 133); overflow:visible;">
            <div style="width:300px;">
                ... testing sdfsdfsdfsd sdfsdsdf sdf sdfsd fsd fsd fsdfsdff sdfsdfsd
            </div>
         </div>
      </td>
  </tr>
</table>

如果您不希望内容是表格的整个宽度，只需删除<div style="width:300px;"></div>

于 2013-04-18T14:38:01.197 回答
0

使用@mwcz 答案。

在 HTML 中（我使用 twig，但你可以理解）：

<td class="text-right pie-progress pie-progress-share{{ (count/totalCount)|round }}">{{ count }}</td>

在 CSS 中：

td.pie-progress {
    position: relative;
}
td.pie-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #66afe9;
    z-index: -1;
}
td.pie-progress-green::before {
    /* example of other color */
    background-color: #66af66;
}
td.pie-progress.pie-progress-share1::before {width: 1%;}
td.pie-progress.pie-progress-share2::before {width: 2%;}
...
td.pie-progress.pie-progress-share100::before {width: 100%;}
于 2014-11-19T11:54:18.580 回答
-1

一种方法是使用您想要的颜色、您想要的颜色和半空白、您想要的颜色和 3/4 空白制作图像，然后使用 bacjground-image。

它很脏，但很简单

于 2013-04-18T14:22:27.660 回答