Content-based automatic HTML table cell height when rowpan is enabled

Question

Is there a way to authorize the height of an HTML table based on the content? Also, if it is a cell (or cells) next to an adjacent cell with several rows of rowspans.

eg. if I have a table like this (the cell on the right has Rowspan = "2" and the height of the cell content = 600 pixels, in each cell at the left height of the cell content = 150 pixels):

between the two cells I agree on the left, because the cells themselves automatically increase their height. I would like it to look like this:

If the top cells are automatically collapsed to the height of the cell contents. Anyway to achieve this?

Answer 1

This sets the last row of cells to the correct height ( demo ):

function grow(td) { var table, target, high, low, mid; td = $(td); table = td.closest('table'); target = table.height(); low = td.height(); // find initial high high = low; while (table.height() <= target) { td.height(high *= 2); } // binary search! while (low + 1 < high) { mid = low + Math.floor((high - low) / 2); td.height(mid); if (table.height() > target) { high = mid; } else { low = mid; } } td.height(low); } $('tr:last-child td').each(function() { grow(this); }); 

It must be trivial to convert this to plain JavaScript.

---

Update:. For more complex tables, you will need to replace the last row with this ( demo )

 $.each($('td').get().reverse(), function() { grow(this); }); 

The idea is to call grow() in each cell, starting from the last row and working up.

Answer 2

given the id = "mytable" table, this will be:

  $("#mytable").find("td").each(function(){ var ContentHeight = $($(this).html()).height(); $(this).height(ContentHeight); }); 

Answer 3

at the end of your page, create javascript code and let it do it for you:

  <script type="text/javascript"> document.getElementById("idOfTd").style.height="100px"; </script> 

Answer 4

I think it’s better to create such a http://jsfiddle.net/miqdad/w9QYB/