javascript - 最大化打印宽度 CSS3

Question

我有一个窗口打印表格(报告)的代码，输出如下所示:

我的代码:

CSS

  @media print {
  body * {
    visibility: hidden;
  }
  #reportArea, #reportArea * {
    visibility: visible;
  }
  #reportArea {
    position: absolute;
    left: 0;
    top: 0;
  }
}

HTML( Blade ):

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

<div id="reportArea">
      <div class="box-body table-responsive no-padding">
        <table class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Room #</th>
              <th>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></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>{{ $res -> charge -> sum('price') }}</td>
            </tr>
            @endforeach
            <tr>
              <td colspan="2"><strong>Total:</strong></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td><strong>{{ $total }}</strong></td>
            </tr>
          </tbody>
        </table>
      </div>
      </div>

如何最大限度地利用纸张？如您所见，左右两部分都有很大的空间。或者有更好的方法吗？谢谢。

Answer 1

您可以指定页边距:

@page {
  margin: 0;
}