Estoy tratando de realizar una tabla que tenga un tamaño fijo en cuanto a sus filas (conservando su tamaño), pero que sus columnas se adapte al tamaño de una página sin la necesidad de utilizar JavaScript
para generar dicho efecto, porque lo que estoy haciendo es una tabla en un reporte de PDF con la respectiva librería de mPDF por lo que solo puedo hacer uso de efectos algo limitados con CSS
.
LO QUE PRETENDO
Es solo una imagen de lo que pretendo (gracias a PAINT):
LO QUE TENGO
Es lo que he generado, pero el problema surge porque se debe hacer uso de toda la página de un documento PDF con tamaño CARTA.
CÓDIGO
<style>
.text-left
{
text-align:left;
}
.text-right
{
text-align:right;
}
.text-center
{
text-align:center;
}
.table-factura
{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
border-collapse: collapse;
border: 1px solid #dee2e6;
padding: .3rem;
text-align: center;
font-size: 12px;
font-family: Arial;
line-height: 1.2;
color: #444;
}
.table-item
{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 100%;
border-collapse: collapse;
border-spacing: 0;
padding: .3rem;
border: 1px solid #dee2e6;
text-align: center;
font-size: 12px;
font-family: Arial;
line-height: 1.2;
}
.table-item-prueba
{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
width: 100%;
table-layout: fixed;
max-width: 100%;
border-collapse: collapse;
border-spacing: 0;
padding: .3rem;
border: 1px solid #dee2e6;
text-align: center;
font-size: 12px;
font-family: Arial;
line-height: 1.2;
}
.thead-primary
{
background-color: #007bff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
font-size: 12px;
font-family: Arial;
line-height: 1.2;
}
.table-striped tr:nth-child(even)
{
background-color: #f2f2f2
}
.tr-calculos
{
padding: 0.1rem;
}
.td-calculos
{
border-right: 1px solid #dee2e6;
border-left: 1px solid #dee2e6;
}
.td-legal
{
background-color: rgb(242, 242, 242) !important;
border: 1px solid #D2D2D2;
}
</style>
<br><br><br><br><br><br>
<table class="table-factura">
<tbody>
<tr>
<td class="text-center" colspan="5" style="border: 1px solid #dee2e6;">
<strong>FACTURA DE VENTA - XXXXXX</strong>
</td>
<td class="text-center" colspan="2">
<strong>N°. XXXXX</strong>
</td>
</tr>
</tbody>
</table>
<table class="table-factura">
<tbody>
<tr>
<td class="text-left" colspan="1" style="border: 1px solid #dee2e6;">
<strong>CLIENTE</strong>
</td>
<td class="text-left" colspan="2" style="border: 1px solid #dee2e6;">
XXXXXX XXX
</td>
<td class="text-center" colspan="1" style="border: 1px solid #dee2e6;">
<strong>NIT</strong>
</td>
<td class="text-center" colspan="3" style="border: 1px solid #dee2e6;">
XXXXXXXX
</td>
<td class="text-center" colspan="1" style="border: 1px solid #dee2e6;">
<strong>TELÉFONO</strong>
</td>
<td class="text-center" colspan="3" style="border: 1px solid #dee2e6;">
XXXXXXXX
</td>
</tr>
<tr>
<td class="text-left" colspan="1" style="border: 1px solid #dee2e6;">
<strong>RAZÓN</strong>
</td>
<td class="text-left" colspan="2">
XXXXXX XXXXX
</td>
<td class="text-center" colspan="1" style="border: 1px solid #dee2e6;">
<strong>FECHA</strong>
</td>
<td class="text-center" colspan="3" style="border: 1px solid #dee2e6;">
XXXX-XX-XX
</td>
<td class="text-center" colspan="1" style="border: 1px solid #dee2e6;">
<strong>VENCE</strong>
</td>
<td class="text-center" colspan="3" style="border: 1px solid #dee2e6;">
XXXX-XX-XX
</td>
</tr>
<tr>
<td class="text-left" colspan="1" style="border: 1px solid #dee2e6;">
<strong>DIRECCIÓN</strong>
</td>
<td class="text-left" colspan="6" style="border: 1px solid #dee2e6;">
XXXXXXXXXXXXXX
</td>
<td class="text-center" colspan="1" style="border: 1px solid #dee2e6;">
<strong>CIUDAD</strong>
</td>
<td class="text-center" colspan="3" style="border: 1px solid #dee2e6;">
XXXXXXX, XXXXXXXX
</td>
</tr>
<tr>
<td class="text-left" colspan="1" style="border: 1px solid #dee2e6;">
<strong>Nota:</strong>
</td>
<td class="text-center" colspan="10" style="border: 1px solid #dee2e6;">
</td>
</tr>
</tbody>
</table>
<table class="table-item table-striped">
<tr class="thead-primary">
<th scope="col" style="color: #ffffff">#</th>
<th class="text-left" scope="col" style="color: #ffffff">Código</th>
<th class="text-left" scope="col" style="color: #ffffff">Producto</th>
<th scope="col" class="text-center" style="color: #ffffff">Cantidad</th>
<th scope="col" class="text-center" style="color: #ffffff">Descuento (%)</th>
<th scope="col" class="text-center" style="color: #ffffff">IVA (%)</th>
<th scope="col" class="text-right" style="color: #ffffff">Total</th>
</tr>
<tbody>
<tr>
<th scope="row">
1
</th>
<td class="text-left">
COD003
</td>
<td class="text-left">
LENOVO C40-30
</td>
<td class="text-center">
1
</td>
<td class="text-center">
0%
</td>
<td class="text-center">
19%
</td>
<!--Calculos de facturacion-->
<td class="text-right">
$1,260,000
</td>
</tr>
<tr>
<th scope="row">
1
</th>
<td class="text-left">
COD003
</td>
<td class="text-left">
LENOVO C40-30
</td>
<td class="text-center">
1
</td>
<td class="text-center">
0%
</td>
<td class="text-center">
19%
</td>
<!--Calculos de facturacion-->
<td class="text-right">
$1,260,000
</td>
</tr>
<tr>
<th scope="row">
1
</th>
<td class="text-left">
COD003
</td>
<td class="text-left">
LENOVO C40-30
</td>
<td class="text-center">
1
</td>
<td class="text-center">
0%
</td>
<td class="text-center">
19%
</td>
<!--Calculos de facturacion-->
<td class="text-right">
$1,260,000
</td>
</tr>
<tr>
<th scope="row">
1
</th>
<td class="text-left">
COD003
</td>
<td class="text-left">
LENOVO C40-30
</td>
<td class="text-center">
1
</td>
<td class="text-center">
0%
</td>
<td class="text-center">
19%
</td>
<!--Calculos de facturacion-->
<td class="text-right">
$1,260,000
</td>
</tr>
<br>
</tbody>
</table>