我想将表格的宽度更改为浏览器的窗口。我是怎么做到的?
我默认使用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;计划设计网页。
通常情况下,我不会设计网络,而是开发与数据库,瓶子,表格等的连接......
我是设计网络的初学者。
提前致谢。
答案 0 :(得分:0)
请使用css,我在id
上使用它表{宽度:100%;} 或
它将占用父
的整个宽度答案 1 :(得分:0)
不是类容器的宽度为auto。
它的工作正常只有宽度&#39;容器流体&#39;