Jak uzyskać, że komórki tabeli mają równą wysokość?

Jak ustawić komórki tabeli na tej samej wysokości? Sprawdź numer http://thomaswd.com/organizer/dashboard i kliknij kalendarz. Zobaczysz, że komórki tabeli mają różne wysokości. Mam 2 rzędy na górze stołu, który ma stałą wysokość, a moja wysokość stołu to 100%. Nie chcę określonej wysokości pikseli, ponieważ to nie zadziała, gdy zmieni się rozmiar przeglądarki. Jak mam to zrobic?Jak uzyskać, że komórki tabeli mają równą wysokość?

Źródło

2013-03-13 Thomas Lai

można użyć względnej wysokości, a także, np 10% – Horen

tak, ale górne 2 wiersze mają wysokość piksela –

aby uzyskać komórki tabeli mieć jednakową wysokość użyłem Google Chrome i kontrolowane jeden z dni w kalendarzu, klikając prawym przyciskiem myszy dzień i wybierając "Sprawdź element". Potem zmienił stylistykę „kalendarzowego-day” tak:

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

Wystarczy określić w style.css co chciałbyś wysokość być.

Źródło

2013-03-13 23:19:20

Jaki jest procent 'wysokość: 10%;' z? Co jeśli mam więcej niż dziesięć rzędów? – Flimm

Ponieważ jest to komórka tabeli, której wysokość byłaby poza szczytem stołu. –

Od: 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>

Źródło

2013-03-13 22:47:34

Nie chcę stałej wysokości –

Oczywiście dostosuj skrypt do wymiarów tabel ... –

, a następnie użyj wartości procentowej zamiast stałej wysokości? od zmiany rozmiaru twojego stołu osobiście dodałbym ukryty również min-size i inny przepływ! –

Wygląda na to, co chcesz, to na wysokość najwyższego komórki propagować poprzek rzędu.

Można to zrobić z javascript:

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

Przełóż swoje komórki tabeli do funkcji takich jak to:

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

Źródło

2013-03-13 23:13:36 sanon

działa jak amulet – mwallisch

dzięki, że uratowałeś mój dzień! – SalutonMondo

Innym rozwiązaniem może być:

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

Źródło

2017-05-02 14:26:38

Jak uzyskać, że komórki tabeli mają równą wysokość?

Odpowiedz

Powiązane problemy