पंक्तियों में शामिल होने पर सामग्री के आधार पर HTML तालिका सेल ऊंचाई को स्वचालित करें

Question

क्या सामग्री के आधार पर HTML तालिका ऊंचाई को स्वत: व्यवस्थित करने का कोई तरीका है? इसके अलावा यदि यह कई पंक्तियों के साथ पड़ोसी सेल के बगल में एक सेल (या कोशिकाएं) है।

उदा। अगर मैं इस तरह एक मेज है (दाईं ओर सेल है rowspan = "2" और सेल सामग्री = 150px की बाईं ऊंचाई पर सेल सामग्री = 600px, प्रत्येक कोशिका में की ऊंचाई):

बाईं ओर 2 सेल सहमति के बीच एक अंतर है क्योंकि कोशिकाओं ने स्वयं अपनी ऊंचाई को स्वतः बढ़ाया है। मैं इसे इस तरह देखने के लिए करना चाहते हैं:

कहाँ शीर्ष कोशिकाओं स्वचालित रूप से पतन सामग्री ऊंचाई सेल। क्या इसे प्राप्त करने का कोई तरीका है?

Answer 1

यह सही ऊंचाई पर कोशिकाओं की अंतिम पंक्ति सेट करता है (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); }); 

इसे सादे जावास्क्रिप्ट में परिवर्तित करने के लिए यह छोटा होना चाहिए।

---

अद्यतन: अधिक जटिल तालिकाओं के लिए, आप इस के साथ अंतिम पंक्ति (demo) से बदलना चाहेंगे:

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

विचार हर कोशिका पर grow() कॉल करने के लिए है, आखिरी पंक्ति से शुरू और ऊपर काम कर रहा है।

Answer 2

पर विचार तालिका आईडी = "mytable" यह होगा:

$("#mytable").find("td").each(function(){ 

    var ContentHeight = $($(this).html()).height(); 
    $(this).height(ContentHeight); 

}); 

Answer 3

अपने पृष्ठ के अंत में एक जावास्क्रिप्ट कोड बना सकते हैं और यह आपके लिए इसे करते हैं:

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

Answer 4

मुझे लगता है कि यह बेहतर http://jsfiddle.net/miqdad/w9QYB/