2

Me gustaría poder aumentar el tamaño de la tabla a todo lo ancho de la página. Estoy utilizando bootstrap y bootstrap-table.

He intentado de definírselo en el fichero bootstrap-table dentro de .fixed-table-container { width: 100% } pero no funciona. ¿Me podéis ayudar?

Este es el código html y css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Web Testing</title>

    <!-- INCLUDES -->

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css">
    <link rel="stylesheet" href="assets/bootstrap-editable/css/bootstrap-editable.css">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <script src="assets/jquery/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/bootstrap-table/dist/bootstrap-table.js"></script>
    <script src="assets/bootstrap-editable/js/bootstrap-editable.js"></script>

</head>

<body>          
        <!-- NAVIGATION -->

        <nav class="navbar navbar-default">
          <div class="container-fluid"> 
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
              <a class="navbar-brand" href="http://www.google.es"><img src="assets/images/brandlogo.png"/></a></div>
            <div class="collapse navbar-collapse" id="defaultNavbar1">
              <ul class="nav navbar-nav">
                <li class="active marges-opciones-right" ><a href="produccio.php"><i class="material-icons" style="font-size: 40px">work</i> Page1<span class="sr-only">(current)</span></a></li>
                <li class="text-options marges-opciones-right"><a href="imatges.php"><i class="material-icons" style="font-size: 40px">collections</i> Page2</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li class="dropdown marges-opciones-left"><a href="#" class="dropdown-toggle" 
                data-toggle="dropdown" role="button" aria-expanded="false"><i class="material-icons" style="font-size: 40px" >face</i><span class="username"> Username </span><i class="material-icons" style="font-size: 40px" >list</i></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="underconstruction.html"><span class="glyphicon"></span><i class="material-icons">settings</i>  preferències</a></li>
                    <li><a href="underconstruction.html"><span class="glyphicon"></span><i class="material-icons">lock</i>  canviar password</a></li>
                    <li class="divider"></li>   
                    <li><a href="logout.php"><i class="material-icons" style="font-size:18px">power_settings_new</i>  log out</a></li>
                  </ul>
                </li>
              </ul>
            </div> 
          </div>
        </nav>



        <!-- TABLE -->

        <div class="container-fluid">
          <div class="row">
            <div class="col-md-6 col-md-offset-3">
              <h3 class="text-center">TITULO</h3><h5 class="text-center">SUBTITULO</h5>
            </div>
          </div>
          <hr>
        </div>
        <div class="container">

           <div id="toolbar">
                <div class="btn-group">
                  <button id="changestatus" type="submit" class="btn btn-default" data-toggle='modal' data-target='#change'>BOTON 1</button>
                </div>
            </div>

          <div class="row">
            <?php  
                    // Conexió a la base de dades
                    include("functions.php"); 
                    include("tools.php"); 
                    $conn = Conectarse("localhost", "5432", "dbname", "dbuser", "dbpass");  
                    //query
                    $query = "SELECT * FROM test.registros ORDER BY id_articulo ASC";
                    $result = pg_query($conn, $query);  
                    //se despliega el resultado  
                    echo "<table id='tableprod'
                                   data-toggle='table'
                                   data-toolbar='#toolbar'
                                   data-show-refresh='true'
                                   data-show-toggle='true'
                                   data-sort-name='name'
                                   data-sort-order='desc'
                                   data-show-columns='true'
                                   data-pagination='true'
                                   data-search='true'>";
                                   // data-click-to-select='true'>";
                        echo "<thead class='thead-inverse'>";
                            echo "<tr>";  
                                echo "<th data id='seleccion' data-switchable='false' data-checkbox='true'></th>";
                                echo "<th data id='estado' data-switchable='false'></th>";   
                                echo "<th data id='campo1' data-sortable='true'>campo1</th>";  
                                echo "<th data id='campo2' data-sortable='true' data-switchable='false'>campo2</th>";  
                                echo "<th data id='campo3' data-sortable='true' data-switchable='false'>campo3</th>"; 
                                //echo "<th data id='image' data-switchable='false'>imatge</th>";   
                                echo "<th data id='campo4' data-sortable='true'>campo4</th>"; 
                                echo "<th data id='campo5' data-sortable='true'>campo5</th>"; 
                                echo "<th data id='campo6' data-sortable='true'>campo6</th>"; 
                                echo "<th data id='campo7' data-sortable='true'>campo7</th>"; 
                                echo "<th data id='campo8' data-sortable='true'>campo8</th>"; 
                                echo "<th data id='campo9' data-sortable='true'>campo9</th>";  
                                echo "<th data id='campo10' data-sortable='true'>campo10</th>";
                                echo "<th data id='campo11' data-sortable='true' data-visible='false'>campo11</th>";
                                echo "<th data id='edit' data-sortable='false' data-switchable='false'>edit</th>";
                            echo "</tr>"; 
                        echo "</thead>"; 
                        echo "<tbody>";
                    while ($row = pg_fetch_row($result)){   
                            // echo $estado = EstadoColorRow($row[14]);  
                            echo "<tr>";
                                echo "<td></td>";
                                echo $estado = EstadoIcon($row[14]); 
                                echo "<td name='campo1'>$row[2]</td>"; 
                                echo "<td name='campo2'>$row[3]</td>";  
                                echo "<td name='campo3'>$row[4]</td>"; 
                                //echo $imatge = AddImage(); 
                                echo "<td name='campo4'>$row[5]</td>";
                                echo "<td name='campo5'>$row[6]</td>";  
                                echo "<td name='campo6'>$row[7]</td>";  
                                echo "<td name='campo7'>$row[8]</td>";  
                                echo "<td name='campo8'>$row[9]</td>";  
                                echo "<td name='campo9'>$row[10]</td>"; 
                                echo "<td name='campo10'>$row[11]</td>"; 
                                echo "<td name='campo11'>$row[12]</td>";
                                echo "<td>"?><p data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-primary btn-xs edit' data-title='Edit' data-toggle='modal' data-target='#edit'><span class='glyphicon glyphicon-pencil'></span> </button></p></td>
                            </tr>  
                    <?php }  ?>
                        </tbody>
                    </table>  
            </div>
          </div>
          <hr>
          <div class="row">
            <div class="text-center col-md-6 col-md-offset-3">
              Pie de página
          </div>
          <hr>
        </div>


/**
 * @author zhixin wen <[email protected]>
 * version: 1.11.0
 * https://github.com/wenzhixin/bootstrap-table/
 */

.bootstrap-table .table {
    margin-bottom: 0 !important;
    /* border-bottom: 1px solid #dddddd; */
    border-bottom: 0;
    border-collapse: collapse !important;
    border-radius: 0;
}

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed) > tbody > tr > th,
.bootstrap-table .table:not(.table-condensed) > tfoot > tr > th,
.bootstrap-table .table:not(.table-condensed) > thead > tr > td,
.bootstrap-table .table:not(.table-condensed) > tbody > tr > td,
.bootstrap-table .table:not(.table-condensed) > tfoot > tr > td {
    padding: 8px;
}

.bootstrap-table .table.table-no-bordered > thead > tr > th,
.bootstrap-table .table.table-no-bordered > tbody > tr > td {
    /* border-right: 2px solid transparent; */
    border-right: 0;
}

.bootstrap-table .table.table-no-bordered > tbody > tr > td:last-child {
    border-right: none;
}

.fixed-table-container {
    width: 100%
    position: relative;
    clear: both;
    border: 1px solid #000000;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

.fixed-table-container.table-no-bordered {
    border: 1px solid transparent;
}

.fixed-table-footer,
.fixed-table-header {
    overflow: hidden;
}

.fixed-table-footer {
    border-top: 1px solid #dddddd;
}

.fixed-table-body {
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
}

.fixed-table-container table {
    width: 100%;
}

.fixed-table-container thead th {
    height: 0;
    padding: 0;
    margin: 0;
    border-left: 1px solid #dddddd;
}

.fixed-table-container thead th:focus {
    outline: 0 solid transparent;
}

.fixed-table-container thead th:first-child {
    border-left: none;
    border-top-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
}

.fixed-table-container thead th .th-inner,
.fixed-table-container tbody td .th-inner {
    padding: 8px;
    line-height: 24px;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fixed-table-container thead th .sortable {
    cursor: pointer;
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.fixed-table-container thead th .both {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC');
}

.fixed-table-container thead th .asc {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==');
}

.fixed-table-container thead th .desc {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ');
}

.fixed-table-container th.detail {
    width: 30px;
}

.fixed-table-container tbody td {
    border-left: 1px solid #dddddd;
}

.fixed-table-container tbody tr:first-child td {
    border-top: none;
}

.fixed-table-container tbody td:first-child {
    border-left: none;
}

/* the same color with .active */
.fixed-table-container tbody .selected td {
    background-color: #f5f5f5;
}

.fixed-table-container .bs-checkbox {
    text-align: center;
}

.fixed-table-container .bs-checkbox .th-inner {
    padding: 8px 0;
}

.fixed-table-container input[type="radio"],
.fixed-table-container input[type="checkbox"] {
    margin: 0 auto !important;
}

.fixed-table-container .no-records-found {
    text-align: center;
}

.fixed-table-pagination div.pagination,
.fixed-table-pagination .pagination-detail {
    margin-top: 10px;
    margin-bottom: 10px;
}

.fixed-table-pagination div.pagination .pagination {
    margin: 0;
}

.fixed-table-pagination .pagination a {
    padding: 6px 12px;
    line-height: 1.428571429;
}

.fixed-table-pagination .pagination-info {
    line-height: 34px;
    margin-right: 5px;
}

.fixed-table-pagination .btn-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.fixed-table-pagination .dropup .dropdown-menu {
    margin-bottom: 0;
}

.fixed-table-pagination .page-list {
    display: inline-block;
}

.fixed-table-toolbar .columns-left {
    margin-right: 5px;
}

.fixed-table-toolbar .columns-right {
    margin-left: 5px;
}

.fixed-table-toolbar .columns label {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
}

.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .search,
.fixed-table-toolbar .columns {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 34px;
}

.fixed-table-pagination li.disabled a {
    pointer-events: none;
    cursor: default;
}

.fixed-table-loading {
    display: none;
    position: absolute;
    top: 42px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    background-color: #fff;
    text-align: center;
}

.fixed-table-body .card-view .title {
    font-weight: bold;
    display: inline-block;
    min-width: 30%;
    text-align: left !important;
}

/* support bootstrap 2 */
.fixed-table-body thead th .th-inner {
    box-sizing: border-box;
}

.table th, .table td {
    vertical-align: middle;
    box-sizing: border-box;
}

.fixed-table-toolbar .dropdown-menu {
    text-align: left;
    max-height: 300px;
    overflow: auto;
}

.fixed-table-toolbar .btn-group > .btn-group {
    display: inline-block;
    margin-left: -1px !important;
}

.fixed-table-toolbar .btn-group > .btn-group > .btn {
    border-radius: 0;
}

.fixed-table-toolbar .btn-group > .btn-group:first-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.fixed-table-toolbar .btn-group > .btn-group:last-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bootstrap-table .table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 1px solid #000;
}

/* support bootstrap 3 */
.bootstrap-table .table thead > tr > th {
    padding: 0;
    margin: 0;
}

.bootstrap-table .fixed-table-footer tbody > tr > td {
    padding: 0 !important;
}

.bootstrap-table .fixed-table-footer .table {
    border-bottom: none;
    border-radius: 0;
    padding: 0 !important;
}

.pull-right .dropdown-menu {
    right: 0;
    left: auto;
}

/* calculate scrollbar width */
p.fixed-table-scroll-inner {
    width: 100%;
    height: 200px;
}

div.fixed-table-scroll-outer {
    top: 0;
    left: 0;
    visibility: hidden;
    width: 200px;
    height: 150px;
    overflow: hidden;
}

Aparte de esto tengo aplicado el fichero css de bootstrap. Si es necesario pasaría el código pero está con las opciones por defecto.

2 respuestas 2

0

Prueba a poner la tabla dentro de un

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <!-- tu tabla aquí siempre se verá al 100% en todas las resolcuiones-->
        </div>
    </div>
</div>

Los elementos de Bootstrap se adaptan al ancho que tienen sus contenedores por lo que si está dentro de un container-fluid este a su vez en un col-md-12 este será del 100% de la página, y si metes la tabla dentro de un col-md-6 por ejemplo, esta será del 50% de la página

1
  • Eso es gracias!
    – ruzD
    el 5 oct. 2016 a las 8:49
0

Puedes probar dos cosas:

  1. Cargar el fichero bootstrap, primero y luego el fichero tuyo
  2. Probar a definir el contenedor dentro del row, que sería algo así

            <?php  
                    // Conexió a la base de dades
                    include("functions.php"); 
                    include("tools.php"); 
                    $conn = Conectarse("localhost", "5432", "dbname", "dbuser", "dbpass");  
                    //query
                    $query = "SELECT * FROM test.registros ORDER BY id_articulo ASC";
                    $result = pg_query($conn, $query);  
                    //se despliega el resultado  
                    echo "<table id='tableprod'
                                   data-toggle='table'
                                   data-toolbar='#toolbar'
                                   data-show-refresh='true'
                                   data-show-toggle='true'
                                   data-sort-name='name'
                                   data-sort-order='desc'
                                   data-show-columns='true'
                                   data-pagination='true'
                                   data-search='true'>";
                                   // data-click-to-select='true'>";
                        echo "<thead class='thead-inverse'>";
                            echo "<tr>";  
                                echo "<th data id='seleccion' data-switchable='false' data-checkbox='true'></th>";
                                echo "<th data id='estado' data-switchable='false'></th>";   
                                echo "<th data id='campo1' data-sortable='true'>campo1</th>";  
                                echo "<th data id='campo2' data-sortable='true' data-switchable='false'>campo2</th>";  
                                echo "<th data id='campo3' data-sortable='true' data-switchable='false'>campo3</th>"; 
                                //echo "<th data id='image' data-switchable='false'>imatge</th>";   
                                echo "<th data id='campo4' data-sortable='true'>campo4</th>"; 
                                echo "<th data id='campo5' data-sortable='true'>campo5</th>"; 
                                echo "<th data id='campo6' data-sortable='true'>campo6</th>"; 
                                echo "<th data id='campo7' data-sortable='true'>campo7</th>"; 
                                echo "<th data id='campo8' data-sortable='true'>campo8</th>"; 
                                echo "<th data id='campo9' data-sortable='true'>campo9</th>";  
                                echo "<th data id='campo10' data-sortable='true'>campo10</th>";
                                echo "<th data id='campo11' data-sortable='true' data-visible='false'>campo11</th>";
                                echo "<th data id='edit' data-sortable='false' data-switchable='false'>edit</th>";
                            echo "</tr>"; 
                        echo "</thead>"; 
                        echo "<tbody>";
                    while ($row = pg_fetch_row($result)){   
                            // echo $estado = EstadoColorRow($row[14]);  
                            echo "<tr>";
                                echo "<td></td>";
                                echo $estado = EstadoIcon($row[14]); 
                                echo "<td name='campo1'>$row[2]</td>"; 
                                echo "<td name='campo2'>$row[3]</td>";  
                                echo "<td name='campo3'>$row[4]</td>"; 
                                //echo $imatge = AddImage(); 
                                echo "<td name='campo4'>$row[5]</td>";
                                echo "<td name='campo5'>$row[6]</td>";  
                                echo "<td name='campo6'>$row[7]</td>";  
                                echo "<td name='campo7'>$row[8]</td>";  
                                echo "<td name='campo8'>$row[9]</td>";  
                                echo "<td name='campo9'>$row[10]</td>"; 
                                echo "<td name='campo10'>$row[11]</td>"; 
                                echo "<td name='campo11'>$row[12]</td>";
                                echo "<td>"?><p data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-primary btn-xs edit' data-title='Edit' data-toggle='modal' data-target='#edit'><span class='glyphicon glyphicon-pencil'></span> </button></p></td>
                            </tr>  
                    <?php }  ?>
                        </tbody>
                    </table>  
       </div>            
    

2
  • Voy a probar, gracias!
    – ruzD
    el 2 oct. 2016 a las 10:06
  • Has introducido la tabla dentro de un container-fluid ? normalmente los contenidos se adaptan al ancho del recipiente donde se encuentran
    – David
    el 5 oct. 2016 a las 6:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.