javascript - CSS3 和 JavaScript 打印区域

Question

我这里有一段代码可以在我的 html 中打印表格。这是代码:

CSS:

  @media print {
  body * {
    visibility: hidden;
  }

  #reportArea, #reportArea * {
    visibility: visible;
  }

  #reportArea {
    right:0;
    padding:0;
    left: 0;
    top: 0;
  }

}

html:

<button type="submit" class="btn btn-success hidden-print" onclick="window.print();">

<div id="reportArea">
  <h3 class="text-center">Hotelier Reservation Summary Report</h3>
  &nbsp;&nbsp; Summary Report For: {{ $from }} - {{ $to }} 
  <div class="box-body table-responsive no-padding">
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>Room #</th>
          <th class="hidden-print">Invoice #</th>
          <th>Client Name</th>
          <th>Booked At</th>
          <th>Reservation From</th>
          <th>Reservation To</th>
          <th>Amount</th>
      </thead>
      </tr>
      <tbody>
        @foreach($reservations as $res)
        <tr>
          <td>{{ $res -> room -> room_number }}</td>
          <td class="hidden-print">
            <a href="/payment/invoice?reservation_id={{ $res -> id }}">{{ date('Ymd').'-'.$res -> id }}</a>
          </td>
          <td>{{ $res -> client -> name }}</td>
          <td>{{ date('F d, Y', strtotime($res -> created_at )) }}</td>
          <td>{{ date('F d, Y', strtotime($res -> reservation_from)) }}</td>
          <td>{{ date('F d, Y', strtotime($res -> reservation_to)) }}</td>
          <td>&#8369;{{ number_format($res -> charge -> sum('price'), 2) }}</td>
        </tr>
        @endforeach
        <tr>
          <td colspan="2"><strong>Total:</strong></td>
          <td class="hidden-print"></td>
          <td></td>
          <td></td>
          <td></td>
          <td><strong>&#8369;{{ number_format($total, 2) }}</strong></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我想做的是占据纸上的所有空间。当我运行这段代码时，我得到了这个:

如您所见，论文的右侧部分有很大的空间。如何最大限度地利用纸张？我的意思是，将表格向右扩展一些，使其适合纸张。提前谢谢你。

Answer 1

即使是不可见的元素也会占用页面空间。使用显示属性创建不占用空间的不可见元素!

body * {
  display: none;
}

#reportArea, #reportArea * {
  display: auto;
}