Question

我试图为两个HTML表提供CSS格式，但我不能。我正在设置HTML和HTML网页CSS（外部工作表中的CSS）和网站的布局取决于表格。

有2张桌子，一张用于头部，另一张用于身体。它们被设置，而内容位于60％宽度的一个中间列中，中心每侧有一列，每个宽度为20％，以及其他表格格式。

我的问题是 - 如何在CSS中格式化表格？我成功地用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不起作用，或者可以编写一些代码来修复它？如果需要进一步说明，请询问。

Answer 1

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>

除非你想要的东西完全不同！希望有所帮助！

Answer 2

尝试以下方法：

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

之前你所拥有的东西因为相互覆盖而无效。

CSS表格格式化为HTML表格

2 个答案: