我有一个简单的表格,用于收件箱如下:

<table border="1">
     <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>

我如何设置宽度,使日期和日期是页面宽度的15%,主题是70%。我还想让表格占据整个页面宽度。


当前回答

表{ 宽度:100%; 边框:1px实心#000; } th.from th。{日期 宽度:15% } th。{主题 宽度:70%;/*不需要,因为只有70%的宽度保留*/ } <表> < thead > < tr > 从< < th类= "从" > / th > < th class = "主题" > < / th >主题 < th class = "日期" > < / th >日期 < / tr > < / thead > tbody > < < tr > (从)< td > < / td > (主题)< td > < / td > < td >[日期]< / td > < / tr > tbody > < / 表> < /

最佳实践是将HTML和CSS分开,以减少代码重复,并分离关注点(HTML用于结构和语义,CSS用于表示)。

请注意,为了在旧版本的Internet Explorer中工作,您可能必须给您的表一个特定的宽度(例如,900px)。如果该浏览器的包装器没有精确的尺寸,则该浏览器在呈现具有百分比尺寸的元素时会出现一些问题。

其他回答

不要使用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 {Table -layout: fixed;} .subject{宽度:70%;} <表> < tr > 从< / th < th > > < th class = "主题" > < / th >主题 < th > < / th >日期 < / tr > 表> < /

style="column-width:300px;white-space: normal;"

表{ 宽度:100%; 边框:1px实心#000; } th.from th。{日期 宽度:15% } th。{主题 宽度:70%;/*不需要,因为只有70%的宽度保留*/ } <表> < thead > < tr > 从< < th类= "从" > / th > < th class = "主题" > < / th >主题 < th class = "日期" > < / th >日期 < / tr > < / thead > tbody > < < tr > (从)< td > < / td > (主题)< td > < / td > < td >[日期]< / td > < / tr > tbody > < / 表> < /

最佳实践是将HTML和CSS分开,以减少代码重复,并分离关注点(HTML用于结构和语义,CSS用于表示)。

请注意,为了在旧版本的Internet Explorer中工作,您可能必须给您的表一个特定的宽度(例如,900px)。如果该浏览器的包装器没有精确的尺寸,则该浏览器在呈现具有百分比尺寸的元素时会出现一些问题。

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