我有一个简单的表格，用于收件箱如下:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
我如何设置宽度，使日期和日期是页面宽度的15%，主题是70%。我还想让表格占据整个页面宽度。
当前回答
<table style="width: 100%"> <colgroup> <col span="1" style="width: 15%;"> <col span="1" style="width: 70%;"> <col span="1" style="width: 15%;"> </colgroup> <!-- Put <thead>, <tbody>, and <tr>'s here! --> <tbody> <tr> <td style="background-color: #777">15%</td> <td style="background-color: #aaa">70%</td> <td style="background-color: #777">15%</td> </tr> </tbody> </table>
其他回答
不要使用border属性，使用CSS来满足所有的样式需求。
<table style="border:1px; width:100%;">
<tr>
<th style="width:15%;">From</th>
<th style="width:70%;">Subject</th>
<th style="width:15%;">Date</th>
</tr>
... rest of the table code...
</table>
但是像这样嵌入CSS是很糟糕的做法——应该使用CSS类，并将CSS规则放在外部CSS文件中。
试试这个吧。
<table style="width: 100%">
<tr>
<th style="width: 20%">
column 1
</th>
<th style="width: 40%">
column 2
</th>
<th style="width: 40%">
column 3
</th>
</tr>
<tr>
<td style="width: 20%">
value 1
</td>
<td style="width: 40%">
value 2
</td>
<td style="width: 40%">
value 3
</td>
</tr>
</table>
另一种方法是只使用一个类，同时将样式保存在CSS文件中，即使在IE7中也能工作:
<table class="mytable">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
<style>
.mytable td, .mytable th { width:15%; }
.mytable td + td, .mytable th + th { width:70%; }
.mytable td + td + td, .mytable th + th + th { width:15%; }
</style>
最近，您还可以使用CSS3 (IE9+)中的n -child()选择器，在那里您只需将各自列的nn .放入括号中，而不是将它们与相邻选择器串在一起。比如这样:
<style>
.mytable tr > *:nth-child(1) { width:15%; }
.mytable tr > *:nth-child(2) { width:70%; }
.mytable tr > *:nth-child(3) { width:15%; }
</style>
使用下面的CSS，第一个声明将确保你的表坚持你提供的宽度(你需要在你的HTML中添加类):
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}
<table style="width: 100%"> <colgroup> <col span="1" style="width: 15%;"> <col span="1" style="width: 70%;"> <col span="1" style="width: 15%;"> </colgroup> <!-- Put <thead>, <tbody>, and <tr>'s here! --> <tbody> <tr> <td style="background-color: #777">15%</td> <td style="background-color: #aaa">70%</td> <td style="background-color: #777">15%</td> </tr> </tbody> </table>
