Como cambiar el ancho de las columnas(widht) con bootstrap 4

publicado por: Anonymous

Buen día colegas.

Tengo un problema, el cliente quiere asignar el ancho de columnas predeterminado, con unos valores que ya vienen por defecto en la base de datos.
Ya estoy obteniendo el dato de los valores de los titulos. Y ya tengo la tabla impresa con php y bootstrap 4.

ancho de columnas

En esta imagen están los valores que recibirá cada ancho de la columna(estos valores pueden cambiar dependiendo de los valores que estén almacenados en la base de datos).

Imagen donde se le aplicaron los anchos

Y esta es la tabla donde se le aplicaran los anchos de columna.

Y este es mi codigo de como estoy imprimiendo las tablas con bootstrap

<h5><strong>CARACTERÍSTICAS TÉCNICAS</strong></h5>
                <div class="row">
                    <div class="col-md-12 table-responsive">
                        <table class="table table-format table-hover">
                            <thead>
                                <tr>
                           <!-- en esta parte se imprimen los titulos -->
                                    <?php foreach ($arrayContenido2[1] as $contenido): ?>
                                    <th><?php echo $contenido ?></th>
                                    <?php endforeach; ?>
                                </tr>
                            </thead>
                            <tbody>
                          <tr>
                        <?php 
                        $count = count($arrayContenido2);
                       //En esta parte se imprime el contenido de las tablas
                        for ($i=2; $i <$count ; $i++) {
                            foreach ($arrayContenido2[$i] as $key => $value) {
                            //si es el primer titulo lo ponga en negrita
                                if ($key == 'A') {
                                    echo "<th scope='row'>".$value."</th>";
                                }else{
                                    echo "<td>".$value."</td>";
                                }
                            }
                            echo "</tr>";
                        }
                        ?>              
                    </tbody>
                </table>
            </div>
        </div>

solución

Si necesitas que cada th tenga un ancho con respecto al número que te trae la base de datos y un ancho total de 100% podemos hacer lo siguiente:

$cabeceras = array(
    array(
        'name' => 'uno',
        'width' => 3
    ),
    array(
        'name' => 'dos',
        'width' => 5
    ),
    array(
        'name' => 'tres',
        'width' => 2
    ),
    array(
        'name' => 'cuatro',
        'width' => 7
    ),
    array(
        'name' => 'cinco',
        'width' => 4
    ),
    array(
        'name' => 'seis',
        'width' => 8
    ),
);

// Sacamos el total de todos los width
$anchoTotal = array_sum(array_column($cabeceras, 'width'));

Y en tu table puedes ir declarando el ancho de cada th con respecto al total

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <?php foreach ($cabeceras as $cabecera): ?>
                    <?php
                    // Calculamos el ancho con respecto al 100%
                    $width = ($cabecera['width'] * 100)/$anchoTotal;
                    ?>
                    <th style="width: <?php echo $width ?>%">
                        <?php echo $cabecera['name'] ?>
                    </th>
                <?php endforeach; ?>
            </tr>
        </thead>
    </table>
</div>

Obtendremos algo así (puse los colores para diferenciar las columnas):

_x000D_

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="table-responsive">_x000D_
  <table class="table">_x000D_
    <thead>_x000D_
      <tr>_x000D_
        <th style="width: 10.344827586207%; background-color: #8ac8b6">_x000D_
          uno </th>_x000D_
        <th style="width: 17.241379310345%; background-color: #64bf64">_x000D_
          dos </th>_x000D_
        <th style="width: 6.8965517241379%; background-color: #13d229">_x000D_
          tres </th>_x000D_
        <th style="width: 24.137931034483%; background-color: #708928">_x000D_
          cuatro </th>_x000D_
        <th style="width: 13.793103448276%; background-color: #678121">_x000D_
          cinco </th>_x000D_
        <th style="width: 27.586206896552%; background-color: #d7ed7a">_x000D_
          seis </th>_x000D_
      </tr>_x000D_
    </thead>_x000D_
  </table>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: user22721

Leave a Reply

Your email address will not be published.