php背景色如何填充满,php - 按一定百分比覆盖背景颜色

我正在通过a

在某种程度上，我希望一个单元格有一个灰色背景，以PHP计算的百分比为基础。

例如：50%表示单元格背景的一半为灰色，其余为空白33,33%=背景的1/3等。

我遇到的问题是，

中的文本被任何其他的DIV所覆盖，如果我将颜色应用于中，我稍后还会覆盖文本等。

代码如下：$percent = 1/3; // For example

$percent_friendly = number_format( $percent * 100, 2 ); //This will return 33.33

echo '

'.$percent_friendly.' %

// So I want the grey to fill 33.33% of the space

';

到目前为止应用的样式：

table {

margin-left:auto;

margin-right:auto;

font-size:18px;

}

table, th, td {

text-align: center;

border: 1px solid black;

position:relative;

}

我一定错过了一些东西，但CSS真的不是我的东西，任何解释或帮助都会非常感谢。

最佳答案

这里是一个简单的解决方案，使用两个宽度固定的div。百分比直接插入到标记中。如果将

设置为绝对位置，那么拉伸td就不会有问题。table {

border: 1px solid;

}

td {

height: 50px;

}

.progress {

padding:0;

width: 200px;

border: 1px solid #555;

background: #ddd;

position: relative;

}

.bar {

height: 100%;

background: #57a;

}

.bar p {

position: absolute;

text-align: center;

width: 100%;

margin: 0;

line-height: 30px;

}

33.33% complete

16.66% complete

66.66% complete

应该可以在所有浏览器中使用，因为它只使用元素宽度。