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

即使是不可见的元素占用了页面上的空间。使用display属性创建不占用空间的不可见元素！

body * {
  display: none;
}

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

CSS3和JavaScript打印区

1 个答案: