So erhalten Sie Tabellenzellen mit gleicher Höhe

Wie bekomme ich Tabellenzellen, die die gleiche Höhe haben? Schauen Sie sich http://thomaswd.com/organizer/dashboard an und klicken Sie auf Kalender. Sie werden sehen, dass die Tabellenzellen unterschiedliche Höhen haben. Ich habe 2 Reihen auf der Oberseite des Tisches, die feste Höhe hat, und meine Tischhöhe ist 100%. Ich möchte keine bestimmte Pixelhöhe, da dies nicht funktioniert, wenn die Größe des Browsers geändert wird. Wie mache ich das?So erhalten Sie Tabellenzellen mit gleicher Höhe

Quelle

2013-03-13 Thomas Lai

Sie auch relative Höhe verwenden können, beispielsweise 10% – Horen

ja, aber die oberen 2 Zeilen haben Pixelhöhen –

die Tabellenzellen Um die gleiche Höhe zu haben, habe ich Google Chrome und inspiziert einen der Tage im Kalender, indem Sie mit der rechten Maustaste auf den Tag klicken und "Element prüfen" auswählen. Dann änderte ich das Styling von ‚Kalender-Tag‘ wie folgt:

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

Geben Sie einfach in style.css, was Sie die Höhe sein möchten.

Quelle

2013-03-13 23:19:20

Wie hoch ist der Prozentsatz "Höhe: 10%"? Was ist, wenn ich mehr als zehn Zeilen habe? – Flimm

Da es sich um eine Tabellenzelle handelt, würde die Höhe außerhalb der Tischhöhe liegen. –

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

Quelle

2013-03-13 22:47:34

Ich möchte keine feste Höhe –

Offensichtlich passen Sie das Skript an Ihre Tabellen Dimensionen ... –

dann verwenden Sie einen Prozentsatz anstelle der festen Höhe? Wenn ich den Tisch persönlich verkleinern würde, würde ich auch eine Min-Size und einen anderen Flow hinzufügen. –

Sieht aus wie Sie wollen, was für die Höhe ist der höchste Zelle in der Zeile zu propagieren.

Sie können dies mit Javascript tun:

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

Fahren Sie mit Tabellenzellen in die Funktion wie folgt aus:

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

Quelle

2013-03-13 23:13:36 sanon

funktioniert wie ein Charme – mwallisch

Danke, du hast meinen Tag gerettet! – SalutonMondo

könnte eine andere Lösung sein:

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

Quelle

2017-05-02 14:26:38

So erhalten Sie Tabellenzellen mit gleicher Höhe

Antwort

Verwandte Themen