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