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>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>