如何设置HTML表格表头宽度且不干扰下方td元素的宽度

问题原因 #

HTML表格原生采用同列宽度共享规则，同一列的<th>和<td>宽度会自动同步，你同时给表头第一列设24%宽度、内容第一列设15%宽度会产生规则冲突，浏览器最终会按撑大的宽度渲染，导致内容列不符合预期。

解决方案 #

以下两种方案均使用纯内联样式实现，无需引入外部CSS文件： #

方案1：拆分表头和内容为独立表格（操作最简单，无样式冲突） #

把表头和内容拆分为两个独立的100%宽度表格，二者列宽规则完全隔离，调整表头宽度不会对内容表格产生任何影响，边框做了适配处理，视觉上仍是一个完整表格：

<!-- 表头表格 -->
<table style="border:1px solid #8c8c8c;width:100%;border-collapse:collapse;">
  <tr style="border-bottom:1px solid black;background-color:#e9e9e9;font-size:16px">
    <th width="24%" style="text-align:left;">
      <div style="white-space: nowrap;">10:35PM - 11:05PM (30 MIN)</div>
    </th>
    <th style="text-align:right;padding-right:1em;" height="40px;">John Williams</th>
  </tr>
</table>
<!-- 内容表格 -->
<table style="border:1px solid #8c8c8c;border-top:none;width:100%;border-collapse:collapse;margin-bottom:1.5em">
  <tbody>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em;">
        <div style="line-height:2em;font-weight:bold"> Topic:</div>
      </td>
      <td valign="baseline">
        <div>Resume Review</div>
      </td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Phone:</div>
      </td>
      <td valign="baseline">123445567</td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Email:</div>
      </td>
      <td valign="baseline"><a href="mailto:JUDYRODRIGUEZ583@GMAIL.COM" target="_blank">JWillia@GMAIL.COM</a></td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;width:auto;font-weight:bold">Student notes:</div>
      </td>
      <td valign="baseline"> some junk test text</td>
    </tr>
  </tbody>
</table>

方案2：单表格结构用colspan属性适配（保持结构完整性） #

如果需要保留单表格结构，可以通过colspan合并单元格的方式调整列规则，让表头时间列和下方标签列不属于同一列，从根源避免宽度同步问题：

<table style="border:1px solid #8c8c8c;width:100%;border-collapse:collapse;margin-bottom:1.5em">
  <thead>
    <tr style="border-bottom:1px solid black;background-color:#e9e9e9;font-size:16px">
      <!-- 第一列对应下方标签列，固定15%宽度 -->
      <th width="15%" style="border:none;"></th>
      <!-- 第二列放时间，宽度自适应不影响第一列 -->
      <th style="text-align:left;">
        <div style="white-space: nowrap;">10:35PM - 11:05PM (30 MIN)</div>
      </th>
      <!-- 第三列放姓名 -->
      <th style="text-align:right;padding-right:1em;" height="40px;">John Williams</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em;">
        <div style="line-height:2em;font-weight:bold"> Topic:</div>
      </td>
      <!-- 内容单元格跨2列，占满剩余宽度 -->
      <td valign="baseline" colspan="2">
        <div>Resume Review</div>
      </td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Phone:</div>
      </td>
      <td valign="baseline" colspan="2">123445567</td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Email:</div>
      </td>
      <td valign="baseline" colspan="2"><a href="mailto:JUDYRODRIGUEZ583@GMAIL.COM" target="_blank">JWillia@GMAIL.COM</a></td>
    </tr>
    <tr>
      <td valign="baseline" style="padding-left:0.5em">
        <div style="line-height:2em;width:auto;font-weight:bold">Student notes:</div>
      </td>
      <td valign="baseline" colspan="2"> some junk test text</td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Rakesh