What I’m trying to achieve is have a table with a static height, but table rows with a dynamic height and min-height. For example, I have a table with 5 rows, each row has a different amount of data. If a row is empty and all the others are full, I want the empty one to shrink to a specified min-height, while the others stretch as much as they need (the table will be scrollable if it exceeds it’s height, so overflow: auto). But if the table is fully empty, I want it to keep it’s static height while having all the table rows stretched out so it fits nicely.
Now, I am aware the you can’t use min-height in table cells, I’m just looking for something that has the same effect.
This is what I’m currently doing.
This is what I’m trying to achieve.
(I’ll only have 1 table, there’s 3 here to showcase multiple scenarios)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>dynamic row height and min height</title>
<style>
table {
width: 250px;
height: 300px;
border-style: solid;
border-color: black;
border-width: 0 2px 2px 0;
float: left;
table-layout: fixed;
overflow: auto;
display: inline-block;
background-color: lightgray;
border-spacing: 0;
margin: 20px;
}
thead tr {
border: 2px solid black;
}
table thead th {
border-top: 2px solid black;
border-left: 2px solid black;
background-color: gray;
height: 20px;
}
table thead tr th:nth-child(1){
max-width: 15%;
width: 15%;
}
table thead tr th:nth-child(2){
max-width: 15%;
width: 15%;
}
table thead tr th:nth-child(3){
max-width: 20%;
width: 20%;
}
table thead tr th:nth-child(4){
max-width: 20%;
width: 20%;
}
table td {
border-top: 2px solid black;
border-left: 2px solid black;
height: 20px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Info</th>
<th>Descripion</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>001</div>
<div>002</div>
<div>003</div>
<div>004</div>
</td>
<td>
<div>1N</div>
<div>2N</div>
<div>3N</div>
<div>4N</div>
</td>
<td>
<div>1info</div>
<div>2info</div>
<div>3info</div>
<div>4info</div>
</td>
<td>
<div>1desc</div>
<div>2desc</div>
<div>3desc</div>
<div>4desc</div>
</td>
</tr>
<tr>
<td>
<div>005</div>
<div>006</div>
</td>
<td>
<div>5N</div>
<div>6N</div>
</td>
<td>
<div>5info</div>
<div>6info</div>
</td>
<td>
<div>5desc</div>
<div>6desc</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div>007</div>
<div>008</div>
<div>009</div>
<div>010</div>
<div>011</div>
<div>012</div>
<div>013</div>
</td>
<td>
<div>7N</div>
<div>8N</div>
<div>9N</div>
<div>10N</div>
<div>11N</div>
<div>12N</div>
<div>13N</div>
</td>
<td>
<div>7info</div>
<div>8info</div>
<div>9info</div>
<div>10info</div>
<div>11info</div>
<div>12info</div>
<div>13info</div>
</td>
<td>
<div>7desc</div>
<div>8desc</div>
<div>9desc</div>
<div>10desc</div>
<div>11desc</div>
<div>12desc</div>
<div>13desc</div>
</td>
</tr>
<tr>
<td>
<div>014</div>
<div>015</div>
<div>016</div>
<div>017</div>
</td>
<td>
<div>14N</div>
<div>15N</div>
<div>16N</div>
<div>17N</div>
</td>
<td>
<div>14info</div>
<div>15info</div>
<div>16info</div>
<div>17info</div>
</td>
<td>
<div>14desc</div>
<div>15desc</div>
<div>16desc</div>
<div>17desc</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Info</th>
<th>Descripion</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>001</div>
<div>002</div>
<div>003</div>
</td>
<td>
<div>1N</div>
<div>2N</div>
<div>3N</div>
</td>
<td>
<div>1info</div>
<div>2info</div>
<div>3info</div>
</td>
<td>
<div>1desc</div>
<div>2desc</div>
<div>3desc</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div>007</div>
<div>008</div>
<div>009</div>
<div>010</div>
</td>
<td>
<div>7N</div>
<div>8N</div>
<div>9N</div>
<div>10N</div>
</td>
<td>
<div>7info</div>
<div>8info</div>
<div>9info</div>
<div>10info</div>
</td>
<td>
<div>7desc</div>
<div>8desc</div>
<div>9desc</div>
<div>10desc</div
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Info</th>
<th>Descripion</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Tried using a wrapper, as that would supposedly allow me to set min-height and height, but that resulted in basically the same thing I have now.
I’ve also tried playing around with heights, overflows and other css attributes in different tags, but the best result I managed to get is the code shown in the question.
New contributor
Dano is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.