Is there a way to set the height of a table row and ensure it respects the defined height without taking different heights? I tried using styles with white-space: pre-wrap, overflow: hidden, and text-overflow: ellipsis, but it's not working as expected.
I want each table row to have a fixed height of 100px. If the content within a cell exceeds this height, I would like to show three points (...) to indicate that there is more text available. I believe I can achieve this effect by using the ellipsis style...
The issue lies in the summary column where I am unsure how to implement my desired behavior:
<table class="table">
<thead config="con" array="list.students" class="table-header"></thead>
<tbody>
<tr ng-repeat="student in list.students">
<td class="col-md-1 hidden-xs hidden-sm">{{student.id}}</td>
<td class="col-md-1 hidden-xs hidden-sm">{{student.Name}}</td>
<td class="col-md-2 hidden-xs hidden-sm">{{student.Class}}</td>
<td class="col-md- col-sm-10 col-xs-10" style="padding-left: 10px !important; padding-right: 10px !important;">{{student.Summary}}</td>
</tr>
</tbody>
</table>