CODEWITHSUNDEEP
javascripthtmlcsshtml-table
feacco
feacco

Reputation: 605

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 <td>, 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 whitespace:nowrap 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:

(1)css min-width to columns or cells (2)css width to table (3)css whitespace:nowrap 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?

Upvotes: 3

Views: 1798

Answers (3)

Mr. Rick
Mr. Rick

Reputation: 155

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';
    }
}

Upvotes: 1

Singular1ty
Singular1ty

Reputation: 2615

You've categorized this as javascript, so I'm going to assume you're okay with using some scripting here. I tried some CSS solutions myself from Google and SO, but unfortunately many were responsive based and/or relied on knowing a fixed width - out of the question.

So I used a javascript snippet to loop through all the <td> elements, find which one had the greatest height, then use half of that height to make all of the <td> look roughly square. Fiddle

var greatestHeight = 0;

$('td').each(function(index){
    if($(this).height() > greatestHeight){
        greatestHeight = $(this).height();
    }
});

$('td').css('min-width', (greatestHeight / 2));

It's not perfect, and I'd recommend that you qualify this per table if you have more than one table per page (ie, td.firstTable), otherwise the logic will run between tables.

Upvotes: 0

sinisake
sinisake

Reputation: 11338

Since JQuery=javascript i hope this is acceptable for you:

http://jsfiddle.net/w1dc380w/8/

$( "th,td" ).each(function( index ) {
$( this ).wrapInner( "<div class='wrapper'></div>"); 


});

CSS:

.wrapper {
    width:100px;
    height:100px;
}

simple, we need divs sometimes... :)

Upvotes: 0

Related Questions