Extract data from the database in columns of three

Question

Extract data from the database in columns of three

Navigation

#1 by (1 votes)

0

I need help to put the data brought from a database into an HTML table.

I have this code:

<div class="card-block">
    <?php
        $sql = "SELECT idEmpresa,nombreComercial FROM empresas";
        $objetoBBDD->consultarBD($sql);

        while($fila = $objetoBBDD->devolverFilas())
        {
            echo'<table style="width: 100%;">';
                echo'<tr>';
                    echo'<td><input type="hidden" name="idFormacion" value="'.$fila["idEmpresa"].'"></td>';
                echo'</tr>';
                echo'<tr>';
                    echo'<td><label><b>Empresa</b></label></td>';
                echo'</tr>';
                echo'<tr>';
                    echo'<td><button type="button" class="btn btn-sm btn-secondary">'.$fila["nombreComercial"].'</button>';
                echo'</tr>';
            echo'</table>';
        }
    ?>
</div>

The result of that is this:

So far so good, but what I want to know is how to do it in 4 columns with 3 companies each column.

As I have it now, all the companies put one under another.

The expected result would be something like this:

sql html php

asked by Mario Guiber 30.05.2018 в 20:59

source

1 answer

Remove the .php from the web pages in the url Problem with my database

score 1 · Accepted Answer

Steps to have dynamic columns with Bootstrap:

Include the library. You can do this by downloading the bootstrap css, or by referencing it directly to a site where it is hosted.

Following the Bootstrap Getting Started :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Instead of using tables you must use div in a nested way (it's just an example):

<div class="container"> <div class="row"> <div class="col-sm-3">Fila 1 Columna 1</div> <div class="col-sm-3">Fila 1 Columna 2</div> <div class="col-sm-3">Fila 1 Columna 3</div> </div> <div class="row"> <div class="col-sm-3">Fila 2 Columna 1</div> <div class="col-sm-3">Fila 2 Columna 2</div> <div class="col-sm-3">Fila 2 Columna 3</div> </div> ... </div>

2.1 You need a div that will contain your table , with class container .

2.2 Add a div with the row class for each row you want your table to have.

2.3 Add a div inside the row for each of the columns you want.

By default, bootstrap works with 12 column units. Then the value that is used as column type, defines that so many of those 12 units occupies.

2.3.1 To your div column place the class col-4 so that by default 3 columns are displayed (12/3 = 4 columns).

2.3.2 Place the class col-sm-6 to all your columns, so that in a small width (from 576px to 768px), 2 columns are displayed (12/6 = 2 columns).

In the end you should have something like this (I assume you want all the columns to be the same width, that normally 4 are shown, and when the screen is small, 2 are shown):

<div class="container"> <div class="row"> <div class="col-3 col-sm-6">Fila 1 Columna 1</div> <div class="col-3 col-sm-6">Fila 1 Columna 2</div> <div class="col-3 col-sm-6">Fila 1 Columna 3</div> <div class="col-3 col-sm-6">Fila 2 Columna 1</div> <div class="col-3 col-sm-6">Fila 2 Columna 2</div> <div class="col-3 col-sm-6">Fila 2 Columna 3</div> </div> ... </div>

Depending on the behavior you want the table to have, it will be the classes and structure of html that you should use. You can read more about here .