如何在 HTML 中使表格高度为 100%？

Question

我连续有 5 个表，所有表的高度都为 100%，在浏览器中可以正常工作，元素被拉伸以填充所有可用空间，但它们不会在打印视图中拉伸。

我希望表格超出分页符并具有 header。我尝试使用一个带有一列的表格（因为卡片具有不同的高度并且不能放置在单个5 xn表格中）其中唯一的列包含卡片但是它要么不会破坏内部，要么有非常奇怪的行为，只是改变一个完全不相关的边距或填充破坏了整个布局。

编辑：这是一个大文档的一部分，所以我不能包括整个实现，但这里有一个最小的例子：

<style>
  .flex {
    display: flex;
    gap: 1rem;
    /* add some top margin to simulate content before the table */
    margin-top: 50vh;
  }

  table {
    flex: 1;
  }

  .card {
    padding: 0.5rem;
    border-radius: 0.25rem;
    background: lightblue;
  }
</style>
    
<div class="flex">
  <table>
    <thead>
      <tr>
        <td>
          <div style="background: red">COLUMN1</div>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <!-- more cards -->
    </tbody>
  </table>
  <!-- more tables [1..5] -->
</div>

在打印中，表格仅与内部卡片的总高度一样高，但在浏览器中，稳定器被拉伸了。

Answer 1

您可以为每个表格添加空单元格，以获得与最大表格相同数量的单元格。 还添加单元格高度以保持每个表的网格结构。

css款式

td {
  height: 2rem;
  line-height: 1;
}

 .flex { display: flex; gap: 1rem; /* add some top margin to simulate content before the table */ margin-top: 50vh; } table { flex: 1; }.card { padding: 0.5rem; border-radius: 0.25rem; background: lightblue; } /* new style */ td { height: 2rem; line-height: 1; }

 <div class="flex"> <table> <thead> <tr> <th> <div style="background: red">COLUMN1</div> </th> </tr> </thead> <tbody> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <:-- more cards --> </tbody> </table> <table> <thead> <tr> <th> <div style="background: red">COLUMN2</div> </th> </tr> </thead> <tbody> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td> <div class="card">CARD</div> </td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </tbody> </table> </div>

Answer 2

几年前我遇到过这样的案例，我最终估计了打印页面实际可以容纳的行数，比方说 10 行，所以你每 10 行剪切一次并开始一个新表。

您添加的每个新表style="page-break-before: always;" 你就完成了。

通过这种方式，您可以避免许多渲染器问题，您可以根据需要在每个页面上添加标题或不添加标题，您还可以选择是添加所有表标题还是仅添加扩展表标题。

Answer 3

如果不为 div 分配高度值，这是不可能的。

尝试这个

body, html{height:100%}
div{height:100%}
table{background:green; width:450px}  

让我知道这是否有帮助。