he estado batallado con este problema pero no encuentro solucion.
Intento generar un reporte de ventas pero siempre el ultimo registro hace un salto y aparece en la siguiente pagina: Ejemplo:
Les dejo mi codigo fuente del reporte
<body id="page-top">
<div class="contenedor">
<div id="general">
<div id="div-logo">
<img src="{{public_path('imagenes/Logo.jpg')}}" alt="Logo del cliente" style="height: 35px;">
</div>
<div id="div-titulo" style="height: 100%">
<div style="text-align: center">
<h5 style="font-size: 16px; margin:5px">Lista de ventas</h5>
<h6 style="font-size: 14px; margin:5px"> Reporte de ventas</h6>
<b> Del {{$fechaInicio}} al {{$fechaFinal}}</b>
</div>
</div>
<div id="div-fecha">
<div style="text-align: right">
<br /><br /><br />
Fecha: {{ date("Y-m-d")}}
</div>
</div>
</div>
<table class="table table-bordered table-sm" >
<thead>
<tr>
<th scope="col">No. Venta</th>
<th scope="col">Fecha Venta</th>
<th scope="col">Vendido por</th>
<th scope="col">Imagen</th>
<th scope="col">Producto</th>
<th scope="col">Categoria</th>
<th scope="col">Detalle</th>
<th scope="col">Precio compra</th>
<th scope="col">Precio venta</th>
<th scope="col">Cantidad</th>
<th scope="col">Importe</th>
</tr>
</thead>
<tbody>
@foreach ($ventas as $venta)
<tr>
<td style="text-align:center;">{{$venta->numeroVenta}}</td>
<td style="text-align:center;">{{$venta->fecha_venta}}</td>
<td style="text-align:left;">Daniela Rodriguez</td>
<td style="text-align:center;"><img src="{{public_path('imagenes/productos/').'/'.$venta->imagen}}" style='width: 25px; height:20px;' /></td>
<td style="text-align:left;">{{$venta->nombre}}</td>
<td style="text-align:center;">{{$venta->categoria}}</td>
<td style="text-align:center;">{{$venta->detalle}}</td>
<td style="text-align:right;">${{$venta->precio_compra}}</td>
<td style="text-align:right;">${{$venta->precio_venta}}</td>
<td style="text-align:center;">{{$venta->cantidad}}</td>
<td style="text-align:right;">${{$venta->importe}}</td>
</tr>
@endforeach
<tr>
<td colspan="9"> </td>
<td>Total:</td>
<td style="text-align:right;">$ 50,000</td>
</tr>
</tbody>
</table>
</div>
También me he dado cuenta que si meto registros estáticos, no hace el salto de linea pero cuando meto un for de blade ahí si sucede el problema.
Tambien les dejo el codigo css:
.contenedor{
/*border: 1px solid red;*/
}
body{
font-size: 9px;
}
#general {
width: 100%;
height: 130px;
overflow: hidden;
}
#div-logo , #div-titulo, #div-fecha{
float: left;
width: 33%;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
border-collapse: collapse;
}
.table-bordered td, .table-bordered th {
border: 1px solid #dee2e6;
border-top-color: rgb(222, 226, 230);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(222, 226, 230);
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: rgb(222, 226, 230);
border-bottom-style: solid;
border-bottom-width: 1px;f
border-left-color: rgb(222, 226, 230);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
.table td, .table th {
vertical-align: top;
border-top: 1px solid #dee2e6;
}
th > div, th > span, th {
font-size: 8px;
vertical-align: middle;
}
td > div, td > span, td {
font-size: 6px;
vertical-align: middle;
}
.main_container{
padding-top:15px;
padding-left:5px;
z-index: 99;
background-size: cover;
width:735px;
height:975px;
position:relative;
}
También había agregado estas lineas pero no funciono
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
Recién acabo de meter un tr con datos estático antes de que se ejecute el for y recorra las ventas y funciono, pero aun sigo sin saber cual es el problema.
Encontré el problema pero no se como solucionarlo. Al parecer cuando un TD tiene mucho texto se escribe en la siguiente linea de abajo y esto hace que haga el salto de pagina.