我有一个显示人员列表的HTML表格。对于每一行,我希望有一个不同的进度条背景。像
这样的东西<table>
<tr class="progress-full">...</tr>
<tr class="progress-half">...</tr>
<tr class="progress-quarter">...</tr>
</table>
第一行的整个背景颜色,第二行的一半和最后一行的1/4(使用类或直接使用CSS中的百分比)。
我尝试使用宽度为like here的背景但我没有成功。我可以在div中包含一个div吗?当我检查html代码(例如:with 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>
或许是另一种方法?
答案 0 :(得分:5)
如果您使用CSS ::before
或::after
pseudo-elements,则可以避免在表格中添加任何额外标记。您可以为每个表行提供透明背景,并为伪元素提供所需的宽度。
<强> 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
。如果您需要在多个td
范围内展开进度条,请使用大于100%的宽度。
答案 1 :(得分:1)
为什么不简单地将div或任何其他合适的容器放入你的tds并为它们分配宽度和背景颜色?
如下所示:
<table style="width: 300px;">
<tr>
<td>
<div class="progress-full" >
...
</div>
</td>
</tr>
<tr>
<td >
<div class="progress-quarter" >
...
</div>
</td>
</tr>
</table>
请参阅此DEMO
答案 2 :(得分:1)
将百分比宽度放在div
而不是tr
上(您也错过了td
)
<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>
答案 3 :(得分: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%;}
答案 4 :(得分:-1)
一种方法是使用您想要的颜色,您想要的颜色和半空白,您想要的颜色和3/4空白来制作图像,并使用背景图像。
它很脏,但很简单