How to change the width of the columns (widht) with bootstrap 4

Question

How to change the width of the columns (widht) with bootstrap 4

Navigation

#1 by (2 votes)

1

Good morning, colleagues.

I have a problem, the client wants to assign the default column width, with values that already come by default in the database. I am already obtaining the data of the values of the titles. And I already have the table printed with php and bootstrap 4.

In this image are the values that each column width will receive (these values may change depending on the values that are stored in the database).

And this is the table where the column widths will be applied.

And this is my code of how I'm printing the boards with 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>

php oracle bootstrap-4

asked by Manueel Perezz 15.02.2018 в 16:33

source

1 answer

SQLSTATE error [23000] when trying to add a new item to my BD through my api Convert Windows path to Linux path

score 2 · Accepted Answer

If you need each th to have a width with respect to the number that the database brings you and a total width of 100% we can do the following:

$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'));

And in your table you can go declaring the width of each th with respect to the 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>

We'll get something like that (I put the colors to differentiate the columns):

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