设置表格列宽

Question

我有一个用于收件箱的简单表格，如下所示：

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

如何设置宽度，使发件人和日期为页面宽度的 15%，主题为 70%。我还希望表格占据整个页面宽度。

原文由 alamodey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Gordon Gustafson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

 table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}

 <table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

最佳做法是将 HTML 和 CSS 分开，以减少代码重复和关注点分离（ HTML CSS 用于演示）。

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

原文由 Ron DeVera 发布，翻译遵循 CC BY-SA 4.0 许可协议