Print.css没有为打印页面设置样式

Question

我正在使用Print.css，并希望在按钮点击时打印带有样式的表格数据。

我已将<link rel="stylesheet" type="text/css" href="{{asset('print.css')}}" media="print">包含在一个页面中，我想用样式打印表格数据。但样式不适用于打印页面。

print.css

@media print{
    body{
        background: #000 !important;
        color: #fff !important;
    }
    .table {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
    table {
        background-color: transparent !important;
    }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 1px solid #ddd;
    }
}

要按样式打印的表格

<div class="panel-body" id="toPrint">
                       <table class="table table-striped">
                                <thead>
                                  <tr>
                                    <th>Roll No</th>
                                    <th>Student Name</th>
                                    <th>Father Name</th>
                                    <th>Total Marks</th>
                                    <th>Obtained Marks</th>
                                    <th>Percentage</th>
                                  </tr>
                                </thead>
                                <tbody>
                                    @foreach($search as $student)
                                      <tr>
                                        <td>{!! $student->rollno !!}</td>
                                        <td>{!! $student->name !!}</td>
                                        <td>{!! $student->fname !!}</td>
                                        <td>{!! $student->totalmarks !!}</td>
                                        <td>{!! $student->obtainedmarks !!}</td>
                                        <td>{!! $student->percentage !!}</td>
                                        <div class="alert alert-success">
                                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                          <strong>Success!</strong> You have searched for {{ $student->rollno }}
                                        </div>
                                      </tr>
                                     @endforeach
                                </tbody>
                        </table>
                        <a class="btn btn-default" href="{{ url('/results') }}">Search New Result</a>
                        <a href="javascript:void(0);" class="btn btn-success" id="printPage">Print</a> 
</div>