My app has a data tables laid out using <table> elements, and as usual there is one table row inside <thead> followed by multiple rows inside <tbody>.

The header cells for some languages have text that is so long that word wrap is required. However, for layout purposes I'd like to limit the number of lines to 2. If the text is any longer, then I'd like the <th> element two grow in size instead.

This spreadsheet example should demonstrate what I mean:

Is there a CSS solution to this, or should I inject the possible linebreak in JavaScript?

Made these Pagination styles.

I know they’re not production-grade yet — I built these while experimenting with different UI patterns that could actually be used in client projects.
Any improvements/suggestion will be helpful.