Question

我正在<table>添加行foreach。

在某些时候，我希望一个单元格具有基于PHP中计算的百分比的灰色背景。

Ex：50％意味着细胞背景的一半是灰色的，其余的将保持空白33,33％= 1/3的背景等。

我遇到的问题是<td>中的文字被任何其他div拉伸，如果我将颜色应用于<td>我也会稍后覆盖文本等。

以下是代码：

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

echo '<td>'.$percent_friendly.' %
    <div style="background-color: grey"> // So I want the grey to fill 33.33% of the space
    </div>
    <div style="background-color: white">
    </div>
</td>';

到目前为止应用的样式：

table {
    margin-left:auto; 
    margin-right:auto;
    font-size:18px;
}

table, th, td {
    text-align: center;
    border: 1px solid black;
    position:relative;
}

我必须遗漏一些东西，但CSS真的不是我的东西，任何解释或帮助都会非常感激。

Answer 1

这是一个简单的解决方案，使用2个具有固定宽度的div。百分比直接插入标记中。通过将<p>设置为绝对位置，您不应该有拉伸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;
}

<table>
    <tr>
        <td class="progress">
            <div class="bar" style="width: 33.33%"><p>33.33% complete</p></div>
        </td>
    </tr>
    <tr>
        <td class="progress">
            <div class="bar" style="width: 16.66%"><p>16.66% complete</p></div>
        </td>
    </tr>
    <tr>
        <td class="progress">
            <div class="bar" style="width: 66.66%"><p>66.66% complete</p></div>
        </td>
    </tr>
</table>

应该适用于所有浏览器，因为它只使用元素宽度。

Answer 2

在PHP中：

echo "
<td>
    <div class='progress-bar' style='width: $percent_friendly%'></div>
    <span>$percent_friendly%</span>
</td>";

在CSS中：

td               { position: relative; }
td .progress-bar { position: absolute; background: grey; top: 0; bottom: 0; left: 0; }
td span          { position: relative; }

这允许您将任何结构/字体样式应用于td元素，并且进度条将自行调整。

Answer 3

你可以使用线性渐变作为背景颜色，如果你不介意它看起来有点混乱：

class CustomStrategy implements FieldNamingStrategy {

    @Override
    public String translateName(Field field) {
        if (field.getName().equals("backpack")) {
            return "bag";
        }
        return field.getName();
    }
}

Gson gson = new GsonBuilder().setFieldNamingStrategy(new CustomStrategy()).create();

请注意，这不会在IE9及以下版本中使用

按一定比例覆盖背景颜色

3 个答案: