• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

241
Vistas
una de las columnas en mi tabla es un párrafo corto, si es demasiado largo, debe abreviarse y ampliarse con solo css js no jquery

lógica: si existe un comentario y no hay suficiente espacio → mostrar el comentario con la abreviatura "..." y un nuevo botón desplegable que extiende la fila al hacer clic.

No estoy seguro de cómo se podría lograr esta lógica, las búsquedas devuelven bibliotecas js en su lugar. Novato total :(

Actualmente, cuando hay demasiado texto en una sección, toda la fila se ensancha verticalmente. El código html no es nada elegante sin js:

'''

 <thead class="thead-dark"> <tr> <th class = "time_header">Time</th> <th class = "date_header">Date</th> <th class = "type_header">Type</th> <th class = "value Header">Value</th> <th class = "comment_header">Comment</th> </tr> </thead> <tbody> {{#each userHistoryData}} <tr> <td>{{convert2Time this.date}}</td> <td>{{convert2Date this.date}}</td> <td>{{this.type}}</td> <td>{{this.value}}</td> <td>{{this.comment}}</td> </tr> {{/each}} </tbody> </table>
'''
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Tal vez puedas truncar el texto haciendo algo como esto para que tengas una idea. luego llame al ancho máximo en la pantalla de medios para que se ajusten al tamaño que desea. Déjame saber si este es el que te refieres. Este es el ejemplo solo porque no tengo todo tu código.

 td { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } td:hover { white-space:break-spaces; overflow:visible; } @media only screen and (max-wdith:768px){ td {max-width: 300px;} } @media only screen and (max-wdith:680px){ td {max-width: 100px;} }
 <table> <thead class="thead-dark"> <tr> <th class = "time_header">Time</th> <th class = "date_header">Date</th> <th class = "type_header">Type</th> <th class = "value Header">Value</th> <th class = "comment_header">Comment</th> </tr> </thead> <tbody> {{#each userHistoryData}} <tr> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>THIS is just a sample comment and I want it to fit on my table THIS is just a sample comment and I want it to fit on my tableTHIS is just a sample comment and I want it to fit on my table THIS is just a sample comment and I want it to fit on my table</td> </tr> {{/each}} </tbody> </table>

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda