feacco feacco - 1 year ago 118
CSS Question

In HTML Table: How To Manage Tables Row Height?

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: use of
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
to table.

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.

Is there any way to solve this with or without Javascript or any better way what I think?

Answer Source

No extra white-space solution for you,

In your case this jquery will check every row to , and increase the table width till all rows are nearly equal height.

var i = 0,
    j, row, table = document.getElementsByTagName('table')[0];
while (row = table.rows[i++]) {
    j = 1000;
    while (row.offsetHeight > 200 && j < 2500) {
        j += 500;
        table.style.width = j + 'px';
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download