php - remove - Anular el color de fondo en un determinado porcentaje

strip_tags()

Question

Estoy agregando row a través de una <table> con un foreach .

En algún momento, quiero que una celda tenga un fondo gris basado en el porcentaje calculado en PHP.

Ej: 50% significa que la mitad del fondo de la celda debe ser gris, el resto permanecerá en blanco | 33,33% = 1/3 del fondo, etc.

Los problemas que he encontrado son el texto en el <td> obtenido por otro div, si aplico el color al <td> también anularé el texto más adelante, etc.

Aquí está el código:

$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>'';

y el estilo aplicado hasta ahora:

table {
margin-left:auto;
margin-right:auto;
font-size:18px;
}
table, th, td {
text-align: center;
border: 1px solid black;
position:relative;
}

Debo extrañar algo, pero CSS realmente no es lo mío, cualquier explicación o ayuda sería muy apreciada.

Answer 1

Aquí hay una solución simple que usa 2 divs con un ancho fijo. El porcentaje se inserta directamente en el marcado. Con establecer <p> en una posición absoluta, no debería tener problemas para estirar la 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>

Debería funcionar en todos los navegadores, ya que solo usa elementos de ancho.

Answer 2

En PHP:

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

En el CSS:

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

Esto le permite aplicar estilos estructurales / de fuente al elemento td , y la barra de progreso se ajustará correctamente por sí misma.

Answer 3

Podrías usar un degradado lineal para el color de fondo, si no te importa, parece un poco confuso:

echo ''<td style="background: linear-gradient(to right, grey 0%,grey ''.$percent.''%,white ''.$percent.''%,white 100%);">''.
$percent_friendly.''%''.
''</td>'';

Tenga en cuenta que esto no funcionará en IE9 y abajo