logic: If comment exists and not enough room → display comment with abbreviation "..." and a new dropdown button that extends row on click.
Not sure how this logic could be achieved, searches return js libraries instead. Complete newbie :(
Currently when there's too much text in one section the entire row becomes vertically wider. The html code is nothing fancy with no 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>
Maybe you can truncate the text by doing something like this so you have an idea. then call the max-width on media screen so they fit on the size you want. Let me know if this is the one you mean. This is the example only since I dont have all your code
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>