Passen Sie die Tabellenzeilenhöhe an, um 100% der Tabelle zu füllen, egal wie viele Zeilen.

Question

Ich habe eine Tabelle mit 3 oder 4 Zeilen und möchte, dass die Tabelle eine festgelegte Höhe von 280 Pixeln hat.

Gibt es eine Möglichkeit, die Höhe der Zeilen zu erhalten, um die Tabellenhöhe zu füllen, abhängig davon, wie viele Zeilen in der Tabelle sind?

Um es klarer zu machen, wenn die Tabelle 3 Reihen hat, wird jede Reihe ungefähr 33% Höhe sein und wenn die Tabelle 4 Reihen hat, wird jede Reihe 25% Höhe sein.

Answer 1

Diese im Klar CSS getan werden kann. Geben Sie einfach die Höhe des übergeordneten Div auf 280px und die Höhe der Tabelle auf 100% an.

#wrapper { 
 
    height: 280px; 
 
} 
 

 
.tableElem{ 
 
    height: 100%; 
 
    border-collapse:collapse; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
}

<div id="wrapper"> 
 
    <table class="tableElem"> 
 
    <tr> 
 
     <td>a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>b</td> 
 
    </tr> 
 
    <tr> 
 
     <td>c</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
<br /><br /><br /> 
 

 
<div id="wrapper"> 
 
    <table class="tableElem"> 
 
    <tr> 
 
     <td>a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>b</td> 
 
    </tr> 
 
    <tr> 
 
     <td>c</td> 
 
    </tr> 
 
    <tr> 
 
     <td>d</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

Hallo Ich habe es mit jquery getan.

Hoffe, dass es

hilfreich sein

$(document).ready(function(){ 
 
var rowCount = $('.countRow tr').length; 
 
    a=280/rowCount; 
 
    $('.countRow tr').css('height',a) 
 
})

div{height:280px; background:#ccc;} 
 
table{border:1px solid #777; border-collapse:collapse;} 
 
td{border:1px solid #777; border-collapse:collapse;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div> 
 
    <table class="countRow"> 
 
    <tr> 
 
    <td>dsadasdA</td><td>ASSasAS</td> 
 
    </tr> 
 
    <tr> 
 
    <td>dsadasdA</td><td>ASSasAS</td> 
 
    </tr> 
 
    <tr> 
 
    <td>dsadasdA</td><td>ASSasAS</td> 
 
    </tr> 
 
    <tr> 
 
    <td>dsadasdA</td><td>ASSasAS</td> 
 
    </tr> 
 
    </table> 
 
    </div>

Answer 3

Dies ist, was Marc Uy, ich rede. Bitte schau es dir an.

function adjustRow() { 
 
    var getRow = document.getElementById('table').getElementsByTagName('td'); 
 
    var max = -1; 
 

 
    for (i = 0; i < getRow.length; i++) { 
 
    var getHeight = getRow[i].clientHeight; 
 
    max = getHeight > max ? getHeight : max; 
 
    } 
 

 
    for (j = 0; j < getRow.length; j++) { 
 
    getRow[j].style.height = max + 'px'; 
 
    } 
 
} 
 

 
adjustRow();

table { 
 
    width: 100%; 
 
    min-height: 200px; 
 
} 
 
tr { 
 
    background: #ddd; 
 
}

<table id="table"> 
 
    <tr> 
 
    <td> 
 
     normal 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     normal 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     having different height 
 
     <br>having different height 
 
     <br>having different height 
 
     <br>having different height 
 
     <br>having different height 
 
     <br> 
 
    </td> 
 
    </tr> 
 
</table>