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

我想创建一个HTML表格的基本两列布局，但我希望表格“占据”完整页面。无边距（“白色空间”的边界和浏览器窗口之间），让我用一个例子可以更清晰：如何创建全尺寸HTML表格？（无边距，全窗口）

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

正如你可以看到有，我们有一个绿色的表与黑色侧边栏和红色边框，所有在白色背景顶部。事情是，我希望边界是“绝对的”，用户的浏览器窗口和它们之间没有空白区域。我希望桌子占用整个页面，不要有空格或“边距”或任何它们，对于冗余而言很抱歉。

我该怎么做？

来源

2011-03-19 Jmlevick

'表中的“宽度：100％”？ – JCOC611 2011-03-19 02:34:33

[请阅读此：]]（http://stackoverflow.com/questions/5004665/how-to-make-full-height-cell-in-full-height-table-in-internet-explorer/5004820#5004820 ） – 2011-03-19 02:35:55

这应做到：

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

来源

2011-03-19 02:43:53 RDL

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

附：感谢您的帮助，您的方法也是这样做的）在CSS中使用`body {margin：0px; padding：0px}``

来源

2011-03-19 03:48:13 Jmlevick

不错的工作。在你的CSS中注意'*'。它在不同的浏览器中有时可能会有不同的效果，具体取决于它的使用方式。 – RDL 2011-03-19 04:52:00

另一个问题：我写在那里的代码工作得很好......唯一的问题是，右边栏没有适应不同的屏幕分辨率，我的意思是，它调整到“1080px”的高度aprox，但是当你用1200px离开页脚（Yep，我也有一个页脚），表格的左边看起来完全不受影响，它在所有屏幕上看起来都很好，页脚根据分辨率的变化进行调整但是，表格的右侧边栏或右侧“列”不是为什么？希望你能帮助。 – Jmlevick 2011-03-19 07:19:49

我将不得不看你的代码。在改变浏览器宽度时，表格不应该“分离”自己。表格应该展开，但侧边栏不会变宽，因为它被设置为固定宽度。 – RDL 2011-03-19 14:44:47

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

回答

相关问题

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