css - 在dompdf中调整css

问题描述

我需要适应 dompdf 的 CSS。我在系统中有以下内容，在导出它时，我无法获得适合 pdf 表的类似内容........
在此处输入图像描述
我使用 CSS Used 扩展从系统中的表中复制了 CSS，但我不太擅长 CSS 问题
<!DOCTYPE>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Informe de Reingreso</title>
<style>
    body {
        font-family: Arial, sans-serif;
        font-size: 14px;
    }

    .centerTabla {
        text-align: center;
    }

    table{border-collapse:collapse;}
    th{text-align:left;}

    @media print{
        *,*::before,*::after{text-shadow:none!important;box-shadow:none!important;}
        .table th{background-color:#fff!important;}
        .table-bordered th{border:1px solid #ddd!important;}
    }
        *,*::before,*::after{box-sizing:inherit;}
        /*! CSS Used from: Embedded */
        .vertical-text__inner{display:inline-block;white-space:nowrap;line-height:1.5;transform:translate(0,100%) rotate(-90deg);transform-origin:0 0;}
        .table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;}
        .table td{padding:0.75rem;vertical-align:top;border-top:1px solid #c2cfd6;}
        .table thead th{vertical-align:bottom;border-bottom:2px solid #c2cfd6;}
        .table-sm th,.table-sm td{padding:0.3rem;}
        .table-bordered{border:1px solid #c2cfd6;}
        .table-bordered th,.table-bordered td{border:1px solid #c2cfd6;}
        .table-striped tbody tr:nth-of-type(odd){background-color:rgba(0, 0, 0, 0.05);}
</style>

<body>

    <section>
    <br>
    <div class="form-group row border">
        <div class="table-responsive col-md-12">
            <table class="table table-bordered table-striped table-sm">
                <thead >
                    <tr>                                           
                        <th style="height: 150px"><div style="width:5px" class="vertical-text__inner">Nº</div></th>

                        <th style="width:100px">Pensun Academico Aprobado <br> en 2019 -2020 CII</th>

                        <th><div class="vertical-text__inner" style="width:2px">Nivel</div></th> 

                        <th style="width:80px">Periodo Lectivo</th>   

                        <th><div class="vertical-text__inner" style="width:1px">Calificación</div></th> 

                        <th><div class="vertical-text__inner" style="width:2px">Estado</div></th>  

                        <th><div class="vertical-text__inner" style="width:5px">N° vez tomada</div></th>  

                        <th><div class="vertical-text__inner">% Equiparacion</div></th>  

                        <th style="width:100px">Pensun Academico Aprobado <br> en 2019 -2020 CII</th>

                        <th><div class="vertical-text__inner" style="width:2px">Nivel</div></th>   

                        <th><div class="vertical-text__inner" style="width:15px">Validacion de <br> conocimientos</div></th>   

                        <th><div class="vertical-text__inner">Calificacion valid. <br>de conocimientos</div></th>  

                        <th><div class="vertical-text__inner" style="width:2px">Estado</div></th>  

                        <th><div class="vertical-text__inner">N° vez tomada</div></th> 
                    </tr>
                </thead>
                <tbody>
                @foreach ($analisisReingreso as $materias)
                    <tr>
                    <td class="centerTabla">{{$materias->nVecesTomada}}</td>  <!---contador de materias-->
                    <td>{{$materias->nVecesTomada}}</td> 
                    <td class="centerTabla">{{$materias->nivel}}</td> 
                    <td class="centerTabla">{{$materias->periodoLectivo}}</td> 
                    <td class="centerTabla">{{$materias->calificacion}}</td> 
                    <td class="centerTabla">{{$materias->estado}}</td> 
                    <td class="centerTabla">{{$materias->nVecesTomada}}</td> 
                    <td class="centerTabla">{{$materias->equiparacion}}</td> 
                    <td>{{$materias->asignaturas}}</td> 
                    <td class="centerTabla">{{$materias->nivel}}</td> 
                    <td class="centerTabla">{{$materias->validacionConocimientos}}</td> 
                    <td class="centerTabla">{{$materias->califValidConocimientos}}</td> 
                    <td class="centerTabla">{{$materias->estado}}</td> 
                    <td class="centerTabla">{{$materias->nVecesTomada}}</td> 
                </tr>
                @endforeach
                </tbody>

            </table>
        </div>
    </div>
    </section>
    <br>
    <br>
</body>
标签： cssdompdf
css - 在dompdf中调整css

问题描述

解决方案

推荐阅读
