Question

我想用HTML创建一个基本的两列HTML布局，但我希望该表“占据”FULL PAGE。没有边距（边框和浏览器窗口之间的“空格”），让我更清楚一个例子：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 4</title>
<meta name="Microsoft Theme" content="none">
</head>

<body>

<table border="4" width="100%" height="567" style="border-collapse: collapse; border: 3px solid #FF0000" bordercolorlight="#FF0000">
<tr>
    <td bgcolor="#008080">&nbsp;</td>
    <td width="160" bgcolor="#000000">&nbsp;</td>
</tr>
   </table>

   </body>

   </html>

正如你在那里看到的那样，我们有一张带有黑色侧边栏和红色边框的绿色桌子，全部位于白色背景之上。问题是，我希望边框是“绝对的”，而用户的浏览器窗口与它们之间没有空白区域。我希望桌子占据整页而不是空格或“边距”或者它们是什么，抱歉是多余的。

我该怎么做？

Answer 1

这应该这样做：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 4</title>
<style>
  body {
    margin: 0px;
    padding: 0px;
  }
  .container {
    width: 100%;
    min-height: 567px;
    padding: 0px;
    border: 3px solid #FF0000;
  }
  .container .content {
    background-color: #008080;
  }
  .container .sidebar {
    background-color: #000000;
    width: 160px;
  }
</style>
</head>

<body>

<table class="container">
<tr>
    <td class="content">&nbsp;</td>
    <td class="sidebar">&nbsp;</td>
</tr>
</table>

</body>

</html>

Answer 2

@RDL：是的，我还找到了另一种方法，这里是示例代码（西班牙语评论）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla ajustable al navegador y colunma fija de 200px</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    overflow: auto;
}
#tabla {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #444;
    background-color: #ffc;
}
.celda_dcha {
    width: 200px;
    border: 1px solid #444;
    background-color: #cfc;
}
</style>
</head>

<body>
<!-- los bordes y colores son para testar la maqueta -->
<!-- este esquema se adapta a cualquier resolución de pantalla, conservando la columna de la derecha siempre los 200px -->
<!-- probado en iexplorer 7 y 8, ff 3.6, opera 10 y safari 5 -->
<table id="tabla">
    <tr>
        <td>Contenido</td>
        <td class="celda_dcha">Columna para imágenes</td>
    </tr>
</table>
</body>

</html>

P.S。感谢您的帮助，您的方法也做到了;）

如何创建全尺寸HTML表格？（没有边距，全窗口）

2 个答案:

如何创建全尺寸HTML表格？ （没有边距，全窗口）

2 个答案:

如何创建全尺寸HTML表格？（没有边距，全窗口）