Tabellen mit gleicher Höhe mit JavaScript/CSS

Question

Ich habe eine Aufgabe, wo ich vier Tabellen in einer Seite ausrichten möchte, die dann gedruckt wird. Aber aus irgendeinem Grund kann ich sie nicht auf die gleiche Höhe ausrichten. Ich habe eine Beschränkung, um nur <table> <tr><td> Struktur zu verwenden.

Im Folgenden finden Sie das aktuelle Bild, da die Daten Variante in jeder Tabelle ist:

Und ich versuche das unten zu erreichen, weil unabhängig davon, welche Tabelle, wie viele Daten hat, sie alle sein gleicher Höhe sollte:

Jede Hilfe wäre toll.

Answer 1

Werfen Sie einen Blick auf flexboxes:

.wrapper { 
 
    display: flex; 
 
} 
 

 
table { 
 
    display: flex; 
 
    margin-left: 5px; 
 
    border: 1px solid #000000; 
 
}

<div class="wrapper"> 
 

 
    <table> 
 
    <tr> 
 
     <td>Foo</td> 
 
    </tr> 
 
    </table> 
 
    
 
    <table> 
 
    <tr> 
 
     <td>Foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Foo</td> 
 
    </tr> 
 
    </table> 
 
    
 
    <table> 
 
    <tr> 
 
     <td>Foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Foo</td> 
 
    </tr> 
 
    </table> 
 

 
</div>

Answer 2

jede Tabelle der Gesamtzahl der Zeilen holen. Dann erhalten das Maximum aus diesen Zahlen:

<script type="text/javascript"> 
function max(tab_num_rows) { // you put the numbers into an array 
var ret = tab_num_rows[0]; 
for (var i=1 ; i<tab_num_rows.length; i++) { 
    if (ret < tab_num_rows[i]) 
     ret = tab_num_rows[i]; 
} 
return ret; 
} 
</script> 

dann Sie eine JQuery Schleife machen jede Tabelle zusätzliche Zeilen hinzuzufügen, bis das Maximum erreicht ist.

Answer 3

Flexbox wird die typische Lösung dafür sein (siehe die andere Antwort), wenn Sie aber auch darauf beschränkt sind, flexbox NICHT zu benutzen (zum Beispiel wegen der Kompatibilität zu älteren Browsern), können Sie alle vier Tabellen in die Zellen eines „Wrapper Tisch“, wie

.wrap { 
 
    width: 100%; 
 
} 
 

 
td { 
 
    background: #eee; 
 
    vertical-align: top; 
 
}

<table class="wrap"> 
 
    <tr> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>One</td> 
 
     </tr> 
 
     <tr> 
 
      <td>One</td> 
 
     </tr> 
 
     <tr> 
 
      <td>One</td> 
 
     </tr> 
 
     <tr> 
 
      <td>One</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Two</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Two</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Two</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Three</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Three</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Four</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Four</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Four</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>