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

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

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


当前回答

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

其他回答

使用下面的CSS,第一个声明将确保你的表坚持你提供的宽度(你需要在你的HTML中添加类):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

试试这个吧。

<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>
style="column-width:300px;white-space: normal;"

不要使用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文件中。