将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表格

回答

相关问题