我的桌子大小比我的屏幕大

Question

我有一个.php文件，我从数据库中显示数据，但是我的表的大小比我的屏幕大...

我修改了尺寸但看起来仍然不对，它看起来仍然看起来更大：

这是图片：

如您所见，滚动条超出了显示..

这是我的代码：

  <table width="100" height="100" border="1">
<tr height="50">
<td>Número</td>
<td>Id Producto</td>
<td># Parte</td>
<td width="80">Descripci&oacute;n</td>
<td>Cantidad</td>
<td>Precio</td>
<td>Subtotal</td>
<td>Descuento</td>
<td>total</td>
</tr>
<?php 
include('conexion.php');
$con = conexion();
$sql="select  * from prec pre, prodc pro where pre.idpr=pro.id ";
$res=mysql_query($sql,$con);

$contador=1;
while ($dato=mysql_fetch_array($res))
{
    echo "<tr>";
    echo "<td>".$contador."</td>";
    echo "<td>".$dato['idproducto']."</td>";
    echo "<td>".$dato['parte']."</td>";
    echo "<td width='20'>".$dato['descripcion']."</td>";
    echo "<td>".$dato['cantidad']."</td>";
    echo "<td>".$dato['precio']."</td>";
    echo "<td>".$dato['subtotal']."</td>";
    echo "<td>".$dato['descuento']."</td>";
    echo "<td>".$dato['total']."</td>";
    echo "</tr>";
    $contador++;
}
?>

</table>

有什么想法吗？

Answer 1

如果您使用的是HTML5 doctype，则您的width属性将无效。你将不得不使用CSS。

<table style="width:100%; height:100%; border: 1px solid black;">

但是，如果您需要100％，则需要从body和html元素中删除填充/边距。

<style>
body, html{ width:100%; height:100%; margin:0; padding:0;}
</style>

即使如此，由于你的1px边框，它将是1像素太大。

---

修改

正如弗雷德多次试图指出的那样，你也有一些时髦的SQL：

select * from prec pre, prodc pro where pre.idpr=pro.id

应该是这样的：

select * from pre, pro where pre.idpr = pro.id

或

select * from prec AS pre, prodc AS pro where pre.idpr = pro.id

取决于你的意图。

Answer 2

尝试更改

<table width="100" height="100" border="1">

到

<table width="100%" height="100%" border="1">

Answer 3

如果要使用滚动，请使用overflow：scroll

如果要缩小表格，请使用css更改单个单元格或整个表格的宽度。

如果这些都不是你的一杯茶，你可能需要把桌子分成两张桌子，然后堆叠在一起。

表格的数据是否会超出您目前在图片中显示的数据，因为这对于找到最佳答案非常重要。

Answer 4

此代码将表的宽度减少到使单词不会破坏所需的最小值：

<table height="100" border="1">
 <tr height="50">
  <td>Número</td>
  ...
 </tr>
</table>

这是一个jsfiddle：http://jsfiddle.net/briggs_w/oym1x8mh/