无论有多少行

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做过。

希望它会有所帮助

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

这就是 Marc Uy ，我正在谈论。请看一下。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;