2016-10-02 2 views
0

テーブルの幅をブラウザのウィンドウに変更したいと思います。私はそれを得るためにどうしますか?ブートストラップ - テーブルの幅を変更する方法

私はデフォルト値でブートストラップフレームワークを使用しています。私の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> 

私はテーブルの値の幅を見つけることだったが、私は、このフレームワークは、Webページをデザインする「グリッド」方式を使用すると思います。

通常、私は私がデザインウェブの初心者ですウェブのデザインだけI開発データベースへの接続、bottons、フォーム、...

しません。

ありがとうございます。

答えて

0

iはID

テーブルの上にそれを使用し、それのためにCSSを使用してください{幅:100%;} または

それは親の幅全体を取る

+0

これは既に試してみましたが動作しません。問題はウェブページのグリッドスペースにあると思います。 – ruzD

+0

可能であれば、私にそのリンクを提供してください。それを処理させてください。 –

+0

どうすればリンクを送信できますか? – ruzD

0

ないクラスコンテナの幅を有しています自動にする。

幅が 'container-fluid'の場合のみ有効

関連する問題