0

Muestro una tabla y en un campo muestro la calificación en entero del 1 al 5 y quisiera mostrarlo atreves de estrellas. Esta es mi tabla:

<tr colspan="6" data-toggle="collapse"data-target="#demo_' . $key . '" class="accordion-toggle">
<td>' . ($key + 1) . ' </td>
<td>' . $row["NombreEtrenado"] . ' ' . $row["ApellidosEntrenado"] . '</td>
<td>' . $row["telefono"] . '</td>
<td>' . $row["finicio"] . ' <--> ' . $row["ffin"] . '</td>
<td>' . $row["evaluacionFinal"] . '</td>';

introducir la descripción de la imagen aquí Quisiera mostrar estrellas estaticas de esta forma. Ayuda introducir la descripción de la imagen aquí

3
  • Puedes tener seis imágenes diferentes con cero,una, dos... cinco estrellas, nombrarlas de forma conveniente y usar la que corresponda con la evaluación final dentro del td. O puedes tener una imagen de estrella amarilla y otra de estrella gris, pintar N amarillas y completar el resto con gris hasta 5. O puedes usar los unicode de estrella blanca y estrella negra y pintarlos ahí.
    – Alfabravo
    Commented el 26 mar. 2021 a las 2:18
  • O puedes crear una estrella con html y css
    – Christian
    Commented el 26 mar. 2021 a las 3:28
  • usas algun biblioteca como fontawesome y bootstrap???
    – user46896
    Commented el 26 mar. 2021 a las 4:35

1 respuesta 1

2

Puedes aprovechar el valor de $row['evaluacionFinal'] como medida para tus calificaciones con la ayuda de SCSS:

Solo tienes que modificar el valor de la variable --rating.

<div class="stars" style="--rating: 3"></div>

Básicamente, sustituyes la extensión .css por .scss.

.stars {
  display: inline-block;
  font-family: sans-serif; // asegura que ★ se muestre correctamente
  font-size: 50px;
  line-height: 1;
  --percent: calc(var(--rating) / 5 * 100%)
}

.stars::before {
  background: linear-gradient(90deg, #fc0 var(--percent), #eee var(--percent));
  -webkit-background-clip: text;
  content: '★★★★★';
  -webkit-text-fill-color: transparent
}

Aquí tienes una vista previa desde codepen.io.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.