Tablo hücrelerinin eşit yüksekliğe sahip olmaları nasıl elde edilir

Tablo hücrelerini aynı yükseklikte nasıl alabilirim? http://thomaswd.com/organizer/dashboard'a göz atın ve takvime tıklayın. Tablo hücrelerinin farklı yüksekliklere sahip olduğunu göreceksiniz. Masanın üst kısmında sabit yüksekliğe sahip 2 satır var ve masa yüksekliğim% 100. Belirli bir piksel yüksekliğini istemiyorum, çünkü tarayıcı yeniden boyutlandırıldığında çalışmaz. Bunu nasıl yaparım? GönderenTablo hücrelerinin eşit yüksekliğe sahip olmaları nasıl elde edilir

kaynak

2013-03-13 Thomas Lai

Eğer, hem de örneğin, görece yükseklik kullanabilir 10% – Horen

evet, ama en üstteki 2 satırın piksel yüksekliği –

Google Chrome'u kullanılan ve teftiş tablo hücreleri eşit yüksekliğe sahip almak için:

var eq_el_height = function(els, min_or_max) { 

    els.each(function() { 
     $(this).height('auto'); 
    }); 

    var m = $(els[0]).height(); 

    els.each(function() { 
     var h = $(this).height(); 

     if (min_or_max === "max") { 
      m = h > m ? h : m; 
     } else { 
      m = h < m ? h : m; 
     } 
    }); 

    els.each(function() { 
     $(this).height(m); 
    }); 
};

böyle fonksiyonu içine tablo hücrelerini geçmek Günün sağ tuşunu tıklayarak ve 'Eleman İnceleyin' seçeneğini seçerek takvimdeki günlerden birini seçin. Sonra şöyle 'takvim günlük' styling değiştirdi:

/* shared */ 
td.calendar-day, td.calendar-day-np { 
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
    height: 10%; 
}

Sadece yükseklik olmak istiyorum neyi style.css belirtin.

kaynak

2013-03-13 23:19:20

Yüzde yükseklik:% 10; Ondan fazla satırım varsa ne olur? – Flimm

Bu yükseklik, tablonun yüksekliğinden çıkacak bir masa hücresi olduğu için. –

: en uzun hücrenin yüksekliği satır boyunca yaymak için ne istediğini gibi How can I force all rows in a table to have the same height

<html> 
    <head> 
     <style type="text/css"> 
      #fixedheight { 
       table-layout: fixed; 
      } 

      #fixedheight td { 
       width: 25%; 
      } 

      #fixedheight td div { 
       height: 20px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <table id="fixedheight"> 
      <tbody> 
      <tr> 
       <td><div>content</div></td> 
       <td><div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div></td> 
       <td><div>more content</div></td> 
       <td><div>small content</div></td> 
       <td><div>enough already</div></td> 
      </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

kaynak

2013-03-13 22:47:34

Sabit bir yükseklik istemiyorum –

Açıkçası komut dosyasını tablo boyutlarına uyar ... –

daha sonra sabit yükseklik yerine yüzde kullanın? masanızı kişisel olarak yeniden boyutlandırmanızdan da gizlenmiş bir min boyutu ve başka bir akış eklerim! –

görünüyor.

Sen javascript ile yapabilirsiniz:

 $(#fixedheight tr').each(function(){ 
      eq_el_height($(this).find('td'), "max"); 
     });

kaynak

2013-03-13 23:13:36 sanon

Bir çekicilik – mwallisch

gibi çalışıyor, teşekkürler günümü kurtardın! – SalutonMondo

Başka bir çözüm olabilir:

var maxHeight = null; 
$('#tableId tr').each(function() { 
    var thisHeight = $(this).height(); 
    if(maxHeight == null || thisHeight > maxHeight) maxHeight = thisHeight; 
}).height(maxHeight);

kaynak

2017-05-02 14:26:38

Tablo hücrelerinin eşit yüksekliğe sahip olmaları nasıl elde edilir

cevap

İlgili konular