テーブルの行の高さを調整して、行数にかかわらずテーブルの100％を埋める

Question

3行または4行のテーブルがあり、そのテーブルの高さを280pxに設定します。

テーブルの行数に応じてテーブルの高さを埋めるために行の高さを取得する方法はありますか？

テーブルが3行の場合、各行の高さは約33％になり、テーブルに4行がある場合、各行の高さは25％になります。

Answer 1

役に立つことを願っています。 親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でやりました。

は、これは、プレーン、CSSで行うことができます

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