將CSS表格格式化爲HTML表格

我試圖向兩個HTML表格提供CSS格式，但是我不能。我使用HTML & CSS（在外部工作表中使用CSS）設置網頁，並且網站的佈局取決於表格。將CSS表格格式化爲HTML表格

有兩張桌子，一個用於頭部，另一個用於身體。它們被設置，而內容位於一個60％寬度的中間列中，每個中心的每一側各有一列，每個列寬度爲20％，以及其他表格格式。

我的問題是 - 我如何格式表中的表格？我成功地用HTML格式化了它們，但是這不會。這是表中的CSS代碼 - 每個表具有ID layouttable：

#layouttable{border:0px;width:100%;} 
#layouttable td{width:20%;vertical-align:top;} 
#layouttable td{width:60%;vertical-align:top;background-color:#E8E8E8;} 
#layouttable td{width:20%;vertical-align:top;}

的HTML文檔中的表都各有，在各自的順序，這些元素（與內容內未示出）：

<table id="layouttable"><tr><td></td><td></td><td></td></tr></table>

有沒有人有任何想法爲什麼這個CSS不工作，或者可以寫一些代碼來解決它？如果需要進一步解釋，請問。

來源

2010-05-25 Relentless

表格旨在顯示錶格數據，而不是設置頁面的佈局。 – 2010-05-25 03:26:33

Khnle的方法對我來說工作得很好，儘量把一些內容<td></td>

<!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>Untitled Document</title> 
<style type="text/css"> 
    #header { width:100%; background-color:#CCCCCC; text-align:center;} 
    #layouttable{border:0px;width:100%; text-align:center;} 
    #layouttable td.col1{width:20%;vertical-align:top;} 
    #layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;} 
    #layouttable td.col3{width:20%;vertical-align:top;} 
</style> 
</head> 

<body> 
<table id="header"> 
    <tr> 
     <td>This is the header</td> 
    </tr> 
</table> 
<table id="layouttable"> 
    <tr> 
     <td class='col1'>20% column</td> 
     <td class='col2'>60% column</td> 
     <td class='col3'>20% column</td> 
    </tr> 
</table> 
</body> 
</html>

除非其完全不同的你想要的東西在裏面！希望有所幫助！

來源

2010-05-25 16:27:39 Ryano

嘗試以下操作：

<table id="layouttable"> 
    <tr> 
     <td class='col1'></td> 
     <td class='col2'></td> 
     <td class='col3'></td> 
    </tr> 
</table> 

#layouttable{border:0px;width:100%;} 
#layouttable td.col1{width:20%;vertical-align:top;} 
#layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;} 
#layouttable td.col3{width:20%;vertical-align:top;}

什麼你以前沒有，因爲它們改寫彼此的工作。

來源

2010-05-25 03:30:39

我試過了 - 它不起作用。我開始相信它可能是我的html中的錯誤，雖然我已經徹底檢查過了。不過，感謝您的幫助。 – Relentless 2010-05-25 03:38:00

將CSS表格格式化爲HTML表格

回答

相關問題