Bootstrap - 如何更改表格的宽度

时间:2016-10-02 21:47:15

标签: html css twitter-bootstrap

我想将表格的宽度更改为浏览器的窗口。我是怎么做到的?

我默认使用bootstrap框架值。我的HTML代码是这样的:

<!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>

我一直在寻找表的值宽度,但我认为这个框架使用了&#39;网格&#39;计划设计网页。

通常情况下,我不会设计网络,而是开发与数据库,瓶子,表格等的连接......

我是设计网络的初学者。

提前致谢。

2 个答案:

答案 0 :(得分:0)

请使用css,我在id

上使用它

表{宽度:100%;} 或

它将占用父

的整个宽度

答案 1 :(得分:0)

不是类容器的宽度为auto。

它的工作正常只有宽度&#39;容器流体&#39;