es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema de formato con la plantilla HTML para la tabla de salida r Shiny

15 Jul, 2023 Programación

Voy a hablar de antemano diciendo que solía ser decente en HTML hace un par de décadas, pero creo que perdí la conexión con R. Estoy intentando mostrar un texto y pasar algunas variables. Eso está funcionando muy bien (modifiqué un código básico). Sin embargo, no puedo cambiar el formato, todo se muestra en una columna en lugar de varias. Intenté algunas cosas en vano. Tengo la sensación de que es algo muy básico, pero cualquier ayuda sería muy apreciada.

Aquí está el archivo HTML:

<div class="aimm-score-table">
  <ul class="aimm-score-row">
    <li>Puntaje Potencial</li><li>Factor de Probabilidad</li><li>Puntaje</li>
   </ul>
  <ul class="aimm-score-row">
    <li id="{{ ns('aimm_score_potential_score') }}"></li>
    <li>--</li>
    <li id="{{ ns('aimm_score_likelihood_factor') }}"></li>
    <li>=</li>
    <li id="{{ ns('aimm_score_score') }}"></li>
  </ul>
  <ul class="aimm-score-row">
    <li>Calificación</li>
    <li id="{{ ns('aimm_score_rating') }}"></li>
  </ul>
</div>

Esto es lo que obtengo:
Imagen

Esto es lo que quiero:
Imagen

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el HTML actual está mostrando todo en una sola columna. Para mostrar el diseño como se desea, el código debe actualizarse con algunas modificaciones al CSS.

    Aquí hay una sugerencia:

    <div class="aimm-score-table">
  <table class="aimm-score-row">
    <thead>
      <tr>
        <th>Puntaje Potencial</th>
        <th>Factor de Probabilidad</th>
        <th>Puntaje</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="{{ ns('aimm_score_potential_score') }}"></td>
        <td>--</td>
        <td id="{{ ns('aimm_score_likelihood_factor') }}"></td>
        <td>=</td>
        <td id="{{ ns('aimm_score_score') }}"></td>
      </tr>
      <tr>
        <td>Calificación</td>
        <td colspan="4" id="{{ ns('aimm_score_rating') }}"></td>
      </tr>
    </tbody>
  </table>
</div>

    Esto utiliza un elemento table con secciones thead y tbody para una mejor estructura, y elementos td y th para cada celda en la tabla. El atributo colspan se utiliza para combinar celdas en múltiples columnas, como en la fila “Calificación”.

    Con este HTML actualizado, el CSS también se puede actualizar para dar estilo a la tabla adecuadamente:

    .aimm-score-table {
  margin: 1rem auto;
}

.aimm-score-table table {
  border-collapse: collapse;
  width: 100%;
}

.aimm-score-table th,
.aimm-score-table td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: center;
}

.aimm-score-table th {
  background-color: #f2f2f2;
}

.aimm-score-table td[colspan] {
  text-align: left;
  font-weight: bold;
  background-color: #fff;
}

    Este CSS establece algunos estilos básicos para los elementos table, th y td en la tabla de puntajes, como el borde y el relleno. El selector colspan se utiliza para dar estilo a la fila “Calificación” de manera diferente a las otras filas en la tabla.

    En general, estos cambios deberían dar como resultado la salida deseada con los elementos de la tabla alineados en varias columnas.

Comments are closed.