I wanted to limit height of rows in HTML table
and make too long content of a cell scrollable inside of the cell.

For tables with more data rows only;
not affecting tables with only one data row.

The solution is very simple.

If you want to copy and use it only, without explanation of principle,
you can just press the "End" key at your keyboard (then scroll up little bit) and copy the solution as I am showing it at the end of this article.

If you want to understand how it works,
this article brings the explanation:



1)
Standard way to limit height of anything in HTML output is to use this CSS:

max-height: 4em;
overflow-y: auto;

CSS definition "max-height" will limit height if it will be necessary,
but it will not make the element too high, if element's content will not demand it.
I very like this definition, if the vertical scrollbar will be shown, to make longer content available:

CSS code "overflow: auto" or "overflow-y: auto" causes that vertical scrollbar will be shown if necessary.


/*

Generally, out of this specific example with limitation of height of row in table,
I recommend to use "max-width" and "min-height" definitions for the most of common elements in its typical use.
It is the best solution for responsivity and accessibility.

It is also possible to use "height" or "max-height" if vertical scrollbar is allowed.

Using of fixed height or maximal height without vertical scrollbar is very dangerous
if the content is dynamical (e.g. database output) or being translated even with em units
or if the layout is not defined in em units even with static content.

*/



2)
How to set a size (height, max-height, ...) for a cell <td> in HTML table in CSS:



a)

There is an issue with HTML table cells <td>,
that it is not possible to set them height via CSS in standard way,
since it is not display:block.


/*
For some another elements in normal text out of table we could use CSS definition "display:inline-block;" which allows to set such properties like width or height,
but we want to keep table layout of table,
so we want to keep default browser's definition "display: table-cell;".

We usually do not have to set "display: table-cell;" manually anywhere in our CSS code,
but we usually want to keep it for table cell as default.
*/


The best solution how to set size of HTML table cell via CSS
is to use a <div> directly inside of cell <td>
and to set requested size for this div.
Because a div has "display: block" as default in browser, so it is easy and natural to set a size of a div.

It is described e.g. at Stackoverflow, link below.


b)

But example at Stackoverflow uses "height" and "overflow: hidden;",
which means that height will be fixed and too long content will not be available to read.

I prefer my solution (I would like to tell "standard solution") as shown above,
using "max-height", which means that cell and row will not be too high if it will not be necessary,
and using "overflow: auto" (or "overflow-y: auto") which will show scrollbar if necessary to make whole content available to read.
I consider it more responsive and less limiting for content and its display; generally better for accessibility and usability.




c)

/*
You can see also another tip at the same Stackoverflow topic:
CSS definition "line-height".
Yes, it works even for table cell <td>.

But it does not work for multi-line content in expected way,
because it is height of each line.
Not height of the whole cell.

If you want to set height for a cell (ergo to set height for a row)
and to show vertical scrollbar for the cell if necessary,
as I want,
the line-height is not a solution.


*/


d) Solution how to limit a height of a cell (row) in HTML table, showing vertical scrollbar if neccessary:

HTML code:
<td>
<div>
Your content, e.g. database output.
It can by multiple-line;
it is reason, why we want to limit the height.
</div>
</td>


CSS code:
tr td>div {
max-height: 4em;
overflow-y: auto;
}




3)

I want to use this limitation of row height for multiple-rows table only.

So, if I have a table with more than one data row,
I want to limit height of each row to have an overview over all data in the table.

But if I have a table with exactly one data row,
e.g. as result of SQL query with "LIMIT 1",
I understand it as some kind of detail view, I see one item, one row only,
so I want to use it spreaded, to see the data of the selected row in detail.

So I want to ignore my limitation of row height if the table will have one data row only.

CSS is so great that it is possible to define such behaviour using CSS only,
without any coding in PHP; with very little modification of HTML.

My solution assumes that table is defined using <tbody> element.
So, HTML code has this structure:

<table>

<caption>Database output</caption>

<thead>
<tr> <th>ID</th> <th>Date</th> (...) </tr>
</thead>

<tbody>

<tr>
<td>1</td>
<td>1. 1. 1996</td>
(...)
</tr>

<tr>
(...)
</tr>

(...)

</tbody>

</table>

The <tbody> element is necessary for CSS code below.
The tbody element causes, that first data row of table is first child in its parent. It is the principle.
The tbody element causes, that the header ("thead" if defined; or "tr" with header, if "thead" not defined) is not child of the same direct parent.

How to detect the row, which is the only row (the only element) in tbody?
It is the row, which is first child of the tbody as well as last child of the tbody.



a)

If we want to define something for
a div directly in a cell
in the row, which is the first element in tbody,
it will be this CSS code:

tbody tr:first-child td>div {}



b)

If we want to define something for
a div directly in a cell
in the row, which is the first element in tbody
and at the same time the last element in tbody,
so in the row, which is the only element in tbody,
it will be this CSS code:

tbody tr:first-child:last-child td>div {}


/*

The construction with more pseudoclasses (:first-child:last-child)
works the same way as logical operator AND.

It is the same like with standard classes, from HTML definition:
CSS code "a.new.our{}" will affect links <a> which have the both classes "new" and "our" defined at the same time.
// HTML: <a href="" class="new our">Our new article</a>

It is also possible to combine classes and pseudoclasses at the same definition:
CSS definition "a.our.new:focus {}" will affect the link <a>, which have defined both classes "our" and "new" and have also focus just now in the same time.

*/


c)

If we want to define something for elements which do not correspond to our definition,
we can use pseudoclass ":not()" in CSS.

/*
We can e.g. use CSS definition "a:not(:focus) {}"
to affect all links which do not have focus just now.
*/






So, the final solution will be:



tbody tr:not(:first-child:last-child) td>div {
max-height: 4em;
overflow-y: auto;
}


/*
This CSS code can do it for us,
without any coding in PHP and with only small edit in HTML
(assuming you have defined element tbody around your data rows in your HTML table).

I love the CSS.
(But PHP and SQL too, of course.)
*/


It affects
<div>,
which is directly inside of cell <td>,
which is inside of row <tr>,
which is not (the first element of its parent and the last element of its parent),
which is inside of tbody.

As Mr. De Morgan has told,
if we negate the expression as whole
and we will rewrite it with partial negations,
then operators "and" inside of the expression will change to "or".


So, if
the row will not be the first element of its direct parent
OR
the row will not be the last element of its direct parent,
THEN
the CSS definition above will be applied.

So, if we will have a table with two or more rows in tbody,
then the limitation of height of cell will be applied for all rows,
including the first row (because it is not the last row)
and including the last row (because it is not the first row).


//////////

Summary for TLDR non-readers:

You have to have defined

<tbody> element around data rows in your HTML table
(to detect if the table has 1 data row, or more data rows)

and <div> element around content in a cell
(to set maximal height and to allow vertical scrolling for a cell),

and then you can use this CSS code
to limit the height of each data row
in any HTML table with more than one data row:

tbody tr:not(:first-child:last-child) td>div {
max-height: 4em;
overflow-y: auto;
}

//////////


PS:

If you want to define something for some element
which is not the first child
and is not the last child,

e.g. you want to affect inner rows of tbody only,
without first row,
without last row,

you can use this CSS definition:

tbody tr:not(:first-child):not(:last-child) td>div {}

First row will not be affected;
last row will not be affected.

Honour to Augustus De Morgan (1806 – 1871)
who has defined De Morgan's laws.


//////////


PPS – edit:

Even if you have not defined <tbody>,
but you have defined at least <thead>,
this solution still works in Firefox (PC, Windows, version 104),
because Firefox imagines <tbody> element under </thead> in table automatically.