Hi there,
I want to talk only html (and css) . will go to xojo implementation once it works in html
take this html code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table with Limited Row Height</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
.table tbody tr td {
max-height: 100px;
min-height: 10px;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Table with Limited Row Height</h2>
<table class="table table-striped" style="border: 1px solid;">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<!-- Add more columns if needed -->
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><div class="cell-content">Row 1 Data 1</div></td>
<td><div class="cell-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo sapien, pulvinar efficitur iaculis eget, aliquam at neque. Nulla consectetur purus non mauris dictum, vitae pretium lacus accumsan. Phasellus vehicula sem nisi, in maximus elit fermentum eget. In et ligula tortor. Sed dictum diam nulla, quis iaculis lectus volutpat sed. Proin lobortis nunc sem, in condimentum purus ultrices a. Morbi consectetur feugiat orci, at placerat diam pretium vel. In finibus lacus sed leo gravida feugiat eget at lorem. Donec orci erat, mollis vel tristique a, dapibus dapibus ante. Donec est nulla, vulputate ac vehicula eget, vehicula ut libero.
</div></td>
<!-- Add more data cells if needed -->
</tr>
<tr>
<td>2</td>
<td><div class="cell-content">Row 2 Data 1</div></td>
<td><div class="cell-content">Row 2 Data 2</div></td>
<!-- Add more data cells if needed -->
</tr>
<!-- Add more rows if needed -->
</tbody>
</table>
</div>
</body>
</html>
it renders to something like :
I would like to display only some lines (3 or anything in pixels if easier) of the first row, as it is too big to display, and display some text ellipsis at the end to tell it’s partially displayed.
the tag in the header should do it, the “max-height” in particular, but I can’t make it works.
I’m pretty sure I miss something simple, but cannot figure it.
thanks .
12 posts - 3 participants