1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Columnas de una tabla con un un tamaño determinado

Discussion in 'Programming/Internet' started by jecorrales, Oct 8, 2018.

  1. jecorrales

    jecorrales Guest

    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): [​IMG]


    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. [​IMG]

    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>

    Login To add answer/comment
     

Share This Page