CSS 打印 - 整个页面的拉伸表（高度 = 100%）

Question

基本上，我想要在打印模式下展开一个表格以填充页面的其余部分。我浏览了互联网，检查了this post，但在两个小时后无法弄清楚我做错了什么。这个想法是表格应该占据页面的其余部分

document.querySelector("#print").addEventListener("click", function() {
  //var html = "<div>Test assignment</div>";
  //$('.test').html(html);
  window.print();
});

@media print {
  body * {
    visibility: hidden;
  }
 
  #print-wrapper * {
    visibility: visible;
  }
  .my-table {
    width: 100%;
    height: 100%;
    border: solid;
table-layout: fixed;
  }
  
}

<input type="button" value="print" id="print">
<div id="print-wrapper">
  <div class="print-heading">My table
  </div>
  <div>
    <div class="print-week-heading">Some heading</div>
    <table class="my-table">
      <tr>
        <td>
          A
        </td>
        <td>
          B
        </td>
      </tr>
      <tr>
        <td>
          C
        </td>
        <td>
          D
        </td>
      </tr>

    </table>
  </div>
</div>

Answer 1

遗憾的是，唯一的方法是在桌子上使用position: absolute。只要每个父元素都有height: 100%，那么表格就可以拉伸到整个页面高度。

但是，使用position: absolute 意味着它现在已覆盖其余内容。我已经在表格和兄弟元素上尝试了page-break-* 的所有组合，但无法在其自己的页面上以全高获得表格。

document.querySelector("#print").addEventListener("click", function() {
  //var html = "<div>Test assignment</div>";
  //$('.test').html(html);
  window.print();
});

@media print {
  body,
  html,
  #print-wrappe {
    height: 100%;
  }
  body * {
    visibility: hidden;
  }
  #print-wrapper * {
    visibility: visible;
    height: 100%;
  }
  .my-table {
    border: solid;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
  }
}

<input type="button" value="print" id="print">
<div id="print-wrapper">
  <div class="print-heading">My table
  </div>
  <div>
    <div class="print-week-heading">Some heading</div>
    <table class="my-table">
      <tr>
        <td>
          A
        </td>
        <td>
          B
        </td>
      </tr>
      <tr>
        <td>
          C
        </td>
        <td>
          D
        </td>
      </tr>

    </table>
  </div>
</div>

表格超出内容的一种可能解决方案是将print-weekly-heading 替换为<caption>Some Heading</caption> 作为表格的第一个孩子？这个 sn-p 显示了我想要实现的目标，但需要进一步的 CSS 才能使标题成为可用的标题。

document.querySelector("#print").addEventListener("click", function() {
  //var html = "<div>Test assignment</div>";
  //$('.test').html(html);
  window.print();
});

@media print {
  body,
  html,
  #print-wrappe {
    height: 100%;
  }
  body * {
    visibility: hidden;
  }
  #print-wrapper * {
    visibility: visible;
    height: 100%;
  }
  .my-table {
    border: solid;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
  }
}

<input type="button" value="print" id="print">
<div id="print-wrapper">
  <div class="print-heading">My table
  </div>
  <div>
    <table class="my-table">
      <caption>Some heading</caption>
      <tr>
        <td>
          A
        </td>
        <td>
          B
        </td>
      </tr>
      <tr>
        <td>
          C
        </td>
        <td>
          D
        </td>
      </tr>

    </table>
  </div>
</div>

编辑

第三种选择是display: block 表格单元格并浮动它们。这需要事先了解表中tds 的数量，以便您知道width 的含义。我还设置了表格page-break-before:always，以便表格占据一整页。您可以删除它并将表格高度设置为calc(100% - 3em);，以便它也适合同一页面上的标题。

document.querySelector("#print").addEventListener("click", function() {
  //var html = "<div>Test assignment</div>";
  //$('.test').html(html);
  window.print();
});

@media print {
  html,
  body,
  #print-wrapper {
    height: 100%;
  }
  body * {
    visibility: hidden;
  }
  #print-wrapper * {
    visibility: visible;
  }
  #print-wrapper>div:nth-child(2) {
    height: 100%;
  }
  .my-table {
    page-break-before: always;
    border: solid;
    width: 100%;
    height: calc(100% - 3em);
  }
  .my-table td {
    display: block;
    float: left;
    width: 50%;
    height: 50%;
    padding: 0;
    margin: 0;
  }
}

<input type="button" value="print" id="print">
<div id="print-wrapper">
  <div class="print-heading">My table
  </div>
  <div>
    <div class="print-week-heading">Some heading</div>
    <table class="my-table">
      <tr>
        <td>
          A
        </td>
        <td>
          B
        </td>
      </tr>
      <tr>
        <td>
          C
        </td>
        <td>
          D
        </td>
      </tr>

    </table>
  </div>
</div>

Answer 2

您可以使用vh units来调整桌子的高度。

@media print {
  .my-table {
    height: 90vh; 
  }
}

90vh 相当于页面高度的 90%，因此请根据需要进行调整。

添加代码 sn-p：

document.querySelector("#print").addEventListener("click", function() {
  //var html = "<div>Test assignment</div>";
  //$('.test').html(html);
  window.print();
});

@media print {
  body * {
    visibility: hidden;
  }
 
  #print-wrapper * {
    visibility: visible;
  }
  .my-table {
    width: 100%;
    height: 90vh;
    border: solid;
    table-layout: fixed;
  }
  
}

<input type="button" value="print" id="print">
<div id="print-wrapper">
  <div class="print-heading">My table
  </div>
  <div>
    <div class="print-week-heading">Some heading</div>
    <table class="my-table">
      <tr>
        <td>
          A
        </td>
        <td>
          B
        </td>
      </tr>
      <tr>
        <td>
          C
        </td>
        <td>
          D
        </td>
      </tr>

    </table>
  </div>
</div>