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

    .table {
        border-collapse: collapse;
        width: 100%;
    }

    .th,
    .td {
        padding: 5px;
    }
</style>

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

    <?php foreach ($productos as $pro) : ?>
        <div style="float: left; width: 22%;height:100px;margin-left:15px; margin-bottom:5px;border: dotted #b3a9ab; ">
            <table style="width: 100%;">
                <!--<tr>
                    <td style="text-align: center;"><h3><?= $pro['pro_codigo'] ?></h3></td>
                </tr>-->
                <tr>
                    <td style="text-align: center;"><br><?= $pro['pro_descripcion'] ?></td>
                </tr>
                <tr>
                    <td style="text-align: center;"><h2>REF. <?= $pro['pro_precio'] ?></h2></td>
                </tr>
            </table>
        </div>
    <?php endforeach; ?>

</div>