2015-10-28 5 views
0

У меня есть код, который окно печатает таблицу (отчет) и вывод выглядит следующим образом:Maximize Ширина печати CSS3

enter image description here

Мой код:

CSS

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

HTML (лезвие):

<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> 

Что я могу сделать, чтобы максимально использовать бумагу? Как вы видите, в левой и правой частях есть большое пространство .. или есть лучший способ сделать это? Спасибо.

+0

'ширина: 100%;'? – csmckelvey

+0

Посмотрите на элемент и размер родителей родителей – sailens

+0

@takendarkk, в какую часть следует добавить 100% ширину? – FewFlyBy

ответ

0

Просто сделайте его ширина 100%

#reportarea 
{ 
    width:100%; 
} 

Или вы можете попробовать это:

#reportarea 
{ 
    left:0; 
    right:0; 
    padding:0; 
} 
+0

Все тот же. – FewFlyBy

+0

@FewFlyBy отредактировал, попробуйте сейчас –

0

Вы можете указать страницу margings:

@page { 
    margin: 0; 
} 
+0

Все тот же сэр. спасибо в любом случае – FewFlyBy

+0

Я думаю, что данные слишком короткие, поэтому – FewFlyBy

Смежные вопросы