Zkratka na hlavní stranu: Alt + Shift + horní 2(ě)
Linkedin FB e-mail Google Plus Twitter

Hledat na tomto webu

 
 

Osobní blog
Soukromý, neprofesní mikroblog.
Článek č. 147

Martin Adámek, Náchod & Meziměstí.

Osobní, soukromý, neprofesní mikroblog.

Není určen k profesní prezentaci:
Může obsahovat subjektivní názory a nevětšinové pohledy bez opory u odborné veřejnosti.
Ba může obsahovat i emoce.

Krátké příspěvky, podobné jako např. na Facebooku či jiné platformě, ale u mě na webu v prostředí mimo Facebook či jinou platformu provozovanou třetí stranou.

Kratší a méně důležité texty, které si nezaslouží článek na webu.

Další rozdíl oproti webu je,
že přepínáním jazykových verzí webu se přepíná i obsah dané webové stránky, pokud jsem ho vytvořil ve více jazycích,
zatímco přepínáním jazykových verzí zde na blogu se mění jen jazyk rozhraní, a text zůstává stejný.

Příspěvky se zde mohou objevovat v češtině, angličtině nebo polštině, velmi výjimečně i v jiných jazycích;
a mohu i míchat různé jazyky v jednom příspěvku.

Účelem tohoto mikroblogu je snadná publikace jednoduchých krátkých textů.

Výhodou by měla být vyšší frekvence příspěvků. Jelikož jsem si web navrhl velice robustně a má mnoho možností, je přidání nové stránky (článku) na web, se všemi vlastnostmi stránky, a zatřídění do struktury webu velice zdlouhavé.
Proto jsem si přidal tento nástroj pro snadnější lineární přidávání krátkých textů bez větších složitostí.

Blog, webový deník, místo pro publikaci krátkých poznámek, postřehů či úvah, nástěnka. Prostě blog.

Má to být něco jako přehled mých příspěvků na sociální síti – ale přímo na mém webu, bez závislosti na konkrétní sociální síti.

Dalším důvodem pro vznik tohoto blogu v rámci tohoto webu je, že tento web je archivován Národní knihovnou ČR, což zvyšuje šanci, že to, co sem píšu, bude někomu užitečné.
Tímto zdravím budoucí generace, pokud díky archivu právě čtou tento text v dobách z mého pohledu budoucích.


Martin Adámek – selfie v přírodě, modrá bunda, žlutá zimní čepice, na pozadí zamrzlý potok
(Foto 28. 12. 2021)

Vítám Vás zde a doufám, že tento blog bude užitečný.

Witam tutaj Państwa i mam nadzieję, że ten blog będzie przydatny.

Welcome here; I hope this blog will be useful.

Martin Adámek, Meziměstí, CZ, 01/2022.

(Současně s tímto blogem spouštím také
blog o češtině pro Poláky.
Některé posty zařadím do obou blogů,
ale jinak jsou to dva různé blogy pro různé cílové skupiny a s různým účelem.)

 


CSS: Height limit of a cell <td> (ergo height limit of a row <tr>) in HTML table with more rows; no limit for table with one row

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.

 

Související odkazy

  


Líbil se Vám článek?


Zpětná vazba – hlasování

Hlasy se na serveru připočítají k počitadlům pro tento článek, např. kolikrát tento článek někoho pobavil a kolikrát tento článek někomu pomohl.

Neukládají se jednotlivá hlasování (vzájemná kombinace hlasů, datum, čas, ani jiné údaje).
Proto nemá smysl odesílat prázdný hlas, nemělo by se co k čemu přičíst.

 

Ve Vašem prohlížeči nebude uložena žádná informace (cookies) o tom, že už jste hlasovali.
- Ve Vašem prohlížeči tedy nebude vidět, jak jste hlasovali.
- Kdykoliv budete moci hlasovat znovu, pokud Vám článek opakovaně pomůže (pobaví Vás, potěší, …).
- Pokud Vás právě u jednoho počítače sedí více, mohou postupně hlasovat další lidé.

Počítám člověkohlasy, nikoliv lidi.
Tedy kolikrát článek někomu pomohl,
nikoliv kolika lidem pomohl
.

Třikrát potěšeného jednoho čtenáře počítám stejně jako tři různé jednou potěšené čtenáře.

Každý má do budoucna neomezený počet hlasů.
Když zapomenete, že jste pro tento článek už hlasovali, nevadí – když Vám někdy v budoucnu bude např. užitečný znovu, tak mu znovu pošlete hlas, že Vám byl užitečný.

Můžete si zvolit 1 až N možností

Štítky, labels, kategorie, témata, tagy, hashtagy

(ve vývoji)
 
#science-technology   #electro-ict  
 

Skok nahoru na: Navigační menu
(klávesová zkratka Alt + Shift + horní „5”)

Zaujala Vás tato stránka?

  • Přidat do záložek (Ctrl+D)
  • Sdílet odkaz (vysílačka)Skok nahoru na:
  • Vytisknout (Ctrl+P)
  • Citovat podle ČSN ISO 690

    Tuto stránku

    ADÁMEK, Martin. Osobní blog: Soukromý, neprofesní mikroblog. . Martin Adámek [online]. Náchod / Meziměstí [cit. 2022-10-06]. Dostupné z: https://www.adamek.cz/blog

    Celý web

    ADÁMEK, Martin. Martin Adámek [online]. Náchod / Meziměstí [cit. 2022-10-06]. Dostupné z: https://www.adamek.cz

 

 
 

Národní kulturní dědictví

WebArchiv – Stránky archivovány Národní knihovnou ČR Tyto stránky jsou pravidelně archivovány Národní knihovnou ČR pro svou kulturní, vzdělávací, vědeckou, výzkumnou nebo jinou informační hodnotu za účelem dokumentace autentického vzorku českého webu. Jsou součástí kolekce českých webových stránek, které NK ČR hodlá dlouhodobě uchovávat a zpřístupňovat pro budoucí generace. Jejich záznam je součástí České národní bibliografie a katalogu NK ČR.  

 

 
 

Pro rozptýlení

„Všichni mi říkají, že jméno kocoura se jako heslo pro roota nehodí. Ale když já jsem si tak zvykl na svýho qzb!7kw_2et !”

 

Pro zamyšlení

Mnoho lidí se bojí o svou pověst, ale málokdo se bojí svého svědomí.
[Gaius Plinius Secundus Maior]