如何創建全尺寸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表格？（無邊距，全窗口）