無論有多少行，調整表格行高度以填充表格的100％

Question

我有一個表格，它具有3行或4行，我希望表格的設置高度爲280px。

有沒有辦法根據表中有多少行來獲取行的高度來填充表的高度？

爲了使其更清楚，如果表格有3行，每行高度約爲33％，如果表格有4行，則每行高度爲25％。

Answer 1

這可以在純CSS來完成。 只需指定父div的高度爲280px，並將表格的高度指定爲100％即可。

#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

嗨我已經完成了與jquery。

希望這將有助於

$(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

這是馬克Uy的，我說的。請看一下。

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>