如何创建全尺寸 HTML 表格？（无边距，全窗口）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5359648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Create Full size HTML Tables? (No margins, Full Window)
提问by Jmlevick
I want to create a basic two columns layout in HTML with a table, but I want the table to "occupy" the FULL PAGE. without margins ("white spaces" between borders and browser's window), let me be more clear with an example:
我想用一个表格在 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"> </td>
<td width="160" bgcolor="#000000"> </td>
</tr>
</table>
</body>
</html>
As you can see there, we have a green table with a black sidebar and red borders, all on top of a white background. The thing is, I want the borders to be "absolute" without having white space between user's browser window and them. I want the table to occupy the Full Page without spaces or "margins" or whatever they are, sorry for being redundant.
正如您在那里看到的，我们有一个带有黑色侧边栏和红色边框的绿色表格，全部位于白色背景之上。问题是，我希望边框是“绝对的”，而用户的浏览器窗口和它们之间没有空白。我希望表格占据整页，没有空格或“边距”或任何其他内容，抱歉多余。
How can I do that?
我怎样才能做到这一点？
采纳答案by RDL
This should do it:
这应该这样做：
<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"> </td>
<td class="sidebar"> </td>
</tr>
</table>
</body>
</html>
回答by Jmlevick
@RDL: Yep, I also found another way to do it, here's the sample code (Comments in Spanish):
@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. Thanks for your help, Your method also did it ;)
PS感谢您的帮助，您的方法也做到了;）
