<style>
    .table,
    .td,
    .th {
        border: 1px solid black;
        text-align: left;
    }

    .table {

        width: 100%;
    }

    .th,
    .td {
        border: 1px solid black;
        padding: 5px;
    }
</style>

<div style="display:block; width: 100%;">

       <h3 style="text-align: center; display:block; width: 100%;">Listado de productos</h3>

        <table width="100%" border="1" style="border: 1px solid black; border-collapse: collapse;">
            <thead>
                <tr style="background-color: #2A2F5B;">
                    <th>Referencia</th>
                    <th>Descripción</th>
                    <th>Precio $</th>
                    <th>Precio BsS</th>
                    <th>Precio BsD</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($productos as $row) :  ?>
                    <tr>
                        <td class="text-left"><a :href="'<?= ruta_base() ?>productos/editar/'+row.pro_id">{{ row.pro_codigo }}</a></td>
                        <td class="text-left">{{ row.pro_descripcion }}</td>
                        <td class="text-right" v-html="row.pro_precio"></td>
                        <td class="text-right" v-html="row.pro_precbss"></td>
                        <td class="text-right" v-html="row.pro_precbsd"></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

</div>