HTML 表格格式 - 基于内容的动态列宽

Question

我正在处理一个 HTML 文件，我将使用它作为电子邮件的附件和基于 HTML 的电子邮件消息的基础，该电子邮件消息有一个包含 13 列的表格。

我希望根据内容自动调整列的大小，以便具有较短标题和值的列不会占用与较长值列一样多的空间。现在我看到所有列的大小都是均匀的。

这是我当前的 CSS 和表格代码 sn-ps

     /* What it does: Stops Outlook from adding extra spacing to tables. */
     table, td {
         mso-table-lspace: 0pt !important;
         mso-table-rspace: 0pt !important;
     }
 
     /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
     table {
         border-spacing: 0 !important;
         border-collapse: collapse !important;
         table-layout: fixed !important;
         margin: 0 auto !important;
     }
 
     table table table {
         table-layout: auto;
     }

<table width="100%" border="1" style="font-size:10pt;table-layout: fixed;">
       <thead style="background-color:#10163C;color:#FFFFFF">
         <tr>
            <th>Semester</th>
            <th>Evaluation End Date<br/>(11:59 PM)</th>
            <th>Days<br/>Remaining</th>
            <th>Subject</th>
            <th>Catalog</th>
            <th>Section</th>
            <th>Course Name</th>
            <th>Level</th>
            <th>Trait</th>
            <th>Instructor</th>
            <th>Responses</th>
            <th>Enrollment</th>
            <th>Response<br/>Rate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fall 2020</td>
            <td>December 9, 2020</td>
            <td>5</td>
            <td>SUBJ</td>
            <td>1234</td>
            <td>MWE</td>
            <td>Class_Long NAme Goes Here</td>
            <td>UGRD</td>
            <td>Online</td>
            <td>Y Teacher</td>
            <td>0</td>
            <td>0</td>
            <td>0.00%</td>
        </tr>
    </tbody>

在示例中，Semester、Days Remaining、Subject、Catalog、Section、Level、Trait、Responses、Enrollment、Response Rate 列应该更窄，因为它们的值很短。

而评估结束日期和课程名称应该更宽，因为它们的值更长。

一个限制是我无法使用 JavaScript/JQuery，因为我使用电子邮件发送这些信息。

Answer 1

这是一种方法。

您可以在th 上应用min-width 并将宽度设置为100%，如下所示：

th {
  width: 100%;
  min-width: 125px;
}

此外，我删除了固定布局规范，因为它会阻止某些样式应用于表格。

/* What it does: Stops Outlook from adding extra spacing to tables. */

table,
td {
  mso-table-lspace: 0pt !important;
  mso-table-rspace: 0pt !important;
}


/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */

table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  width: 100%;
  margin: 0 auto !important;
}

th,
td {
  text-align: left;
}

th {
  width: 100%;
  min-width: 125px;
}

<div>
  <table border="1" style="font-size:10pt;">
    <thead style="background-color:#10163C;color:#FFFFFF">
      <tr style="background-color:#10163C;color:#FFFFFF">
        <th>Semester</th>
        <th>Evaluation End Date<br/>(11:59 PM)</th>
        <th>Days<br/>Remaining</th>
        <th>Subject</th>
        <th>Catalog</th>
        <th>Section</th>
        <th>Course Name</th>
        <th>Level</th>
        <th>Trait</th>
        <th>Instructor</th>
        <th>Responses</th>
        <th>Enrollment</th>
        <th>Response<br/>Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Fall 2020</td>
        <td>December 9, 2020</td>
        <td>5</td>
        <td>SUBJ</td>
        <td>1234</td>
        <td>MWE</td>
        <td>Class_Long NAme Goes Here</td>
        <td>UGRD</td>
        <td>Online</td>
        <td>Y Teacher</td>
        <td>0</td>
        <td>0</td>
        <td>0.00%</td>
      </tr>
    </tbody>
  </table>
</div>

如果您不想设置宽度，这是另一种解决方案：

/* What it does: Stops Outlook from adding extra spacing to tables. */

table,
td {
  mso-table-lspace: 0pt !important;
  mso-table-rspace: 0pt !important;
}


/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */

table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  width: 100%;
  margin: 0 auto !important;
}

th,
td {
  text-align: left;
}

th {
  word-wrap: break-word;
}

<div>
  <table border="1" style="font-size:10pt;">
    <thead style="background-color:#10163C;color:#FFFFFF">
      <tr style="background-color:#10163C;color:#FFFFFF">
        <th>Semester</th>
        <th>Evaluation End Date<br/>(11:59 PM)</th>
        <th>Days<br/>Remaining</th>
        <th>Subject</th>
        <th>Catalog</th>
        <th>Section</th>
        <th>Course Name</th>
        <th>Level</th>
        <th>Trait</th>
        <th>Instructor</th>
        <th>Responses</th>
        <th>Enrollment</th>
        <th>Response<br/>Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Fall 2020</td>
        <td>December 9, 2020</td>
        <td>5</td>
        <td>SUBJ</td>
        <td>1234</td>
        <td>MWE</td>
        <td>Class_Long NAme Goes Here</td>
        <td>UGRD</td>
        <td>Online</td>
        <td>Y Teacher</td>
        <td>0</td>
        <td>0</td>
        <td>0.00%</td>
      </tr>
    </tbody>
  </table>
</div>

我所做的只是将word-wrap: break-word; 添加到th 元素。