HTML，CSS : Adjustment height of the table to the number of rows

Question

<div class="modal-body">
              <div class="table-responsive">
                 <table id="table">
                   <thead>
                    <tr>
                       <th>...</th>
                           ...
                    </tr>
                   <thead>

                   <tbody>
                    <tr>
                       <td>...</td>
                           ...
                    </tr>
                   <thead>
                 </table> 
              </div>
        </div>

我想根据行数调整表格的高度。我想使用一些数字 (N px) 来限制高度，但如果行数较少(填充少于 N px)，则表格应该更低。我尝试设置最大高度但没有成功(当时框是空的)。

编辑:我试过了: fiddle

Answer 1

只需将高度添加到 tr，这样表格就可以乘以 tr，我也将你的 id="table" 更改为 class="mytable" 只是为了展示这个例子。

tr {
  height: 50px;
}

table *{
  border: 1px solid green;
  box-sizing: border-box;
}

.table-responsive{
  display: inline-block;
  max-height: 150px;
  overflow: auto;
}

<div class="modal-body">
  <div class="table-responsive">
    <table class="mytable">
      <thead>
        <tr>
          <th>tr here 111111</th>
          <th>tr here 222222</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>tr here 22222</th>
          <td>td here 22222</td>
        </tr>
        <tr>
          <th>tr here 33333</th>
          <td>td here 33333</td>
        </tr>
        <tr>
          <th>tr here 44444</th>
          <td>td here 44444</td>
        </tr>
            <tr>
          <th>tr here 55555</th>
          <td>td here 55555</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<hr>

<div class="modal-body">
  <div class="table-responsive">
    <table class="mytable">
      <thead>
        <tr>
          <th>tr here 111111</th>
          <th>tr here 222222</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>tr here 22222</th>
          <td>td here 22222</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>