我有一个简单的表格，用于收件箱如下:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
我如何设置宽度，使日期和日期是页面宽度的15%，主题是70%。我还想让表格占据整个页面宽度。
当前回答
不要使用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文件中。
其他回答
使用下面的CSS，第一个声明将确保你的表坚持你提供的宽度(你需要在你的HTML中添加类):
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}
这是我的两点建议。
Using classes. There is no need to specify width of the two other columns as they will be set to 15% each automatically by the browser. table { table-layout: fixed; } .subject { width: 70%; } <table> <tr> <th>From</th> <th class="subject">Subject</th> <th>Date</th> </tr> </table> Without using classes. Three different methods but the result is identical. a) table { table-layout: fixed; } th+th { width: 70%; } th+th+th { width: 15%; } <table> <tr> <th>From</th> <th>Subject</th> <th>Date</th> </tr> </table> b) table { table-layout: fixed; } th:nth-of-type(2) { width: 70%; } <table> <tr> <th>From</th> <th>Subject</th> <th>Date</th> </tr> </table> c) This one is my favourite. Same as b) but with better browser support. table { table-layout: fixed; } th:first-child+th { width: 70%; } <table> <tr> <th>From</th> <th>Subject</th> <th>Date</th> </tr> </table>
style="column-width:300px;white-space: normal;"
试试这个吧。
<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>
在table标签后添加colgroup。在这里定义列的宽度和数量，并添加tbody标记。把你的tr放进身体里。
<table>
<colgroup>
<col span="1" style="width: 30%;">
<col span="1" style="width: 70%;">
</colgroup>
<tbody>
<tr>
<td>First column</td>
<td>Second column</td>
</tr>
</tbody>
</table>
