A Simple Problem: When table is wider than screen (overflow) and it contains lengthy text in some cells or
, then the row height will become unnecessary extra.
Before Overflow :
Normal and Acceptable. http://jsfiddle.net/mg8869ou/1/
After Overflow :
Problematic after adding cells Only To Right-Side making unnecessary height for whole row and also whole table. http://jsfiddle.net/w1dc380w/4/
All my tables have different length of text in cells, different number of rows and columns. Is there a single solution to manage all my tables(overflow) row height?
What I think:
to remove white-space or make every cell single line + force longest cell of every row and column to be square or nearly square will make table compact.
Solutions Not Useful For all rows or columns or tables:
to columns or cells (2)css
to table (3)css
Because all cells have different amount of text in it, tables have different width, number of cells, rows & columns. So these CSS leaves useless white-space and unable to make a table compact as possible.