如何让响应式表格表头根据行内长内容自动扩展宽度？

你的表格目前出现内容自动换行的核心原因是：

• 表格设置了width="100%"，强制占满容器宽度
• 默认单元格会在内容过长时自动换行以适配容器宽度

要实现表格根据行内内容长度按需扩展宽度，可以按以下步骤调整：

1. 移除表格强制宽度约束 #

删掉表格的width="100%"属性，让表格根据内容自动计算整体宽度：

<table class="table"> <!-- 移除width="100%" -->

2. 禁用单元格自动换行 #

给表格的表头和单元格添加CSS样式，禁止内容换行，让单元格宽度完全适配内容长度：

.style6, .style9 {
  white-space: nowrap; /* 禁止内容换行 */
  padding: 8px; /* 保留适当内边距，避免内容拥挤 */
}

如果不想修改原有类的全局样式，也可以给表格新增一个专属类（比如content-fit-table），针对性设置样式：

<table class="table content-fit-table">

.content-fit-table th, .content-fit-table td {
  white-space: nowrap;
  padding: 8px;
}

3. 适配小屏幕场景（可选） #

如果需要兼顾移动端可读性，可以保留table-responsive容器，同时通过媒体查询在小屏幕时恢复单元格自动换行：

@media (max-width: 768px) {
  .content-fit-table th, .content-fit-table td {
    white-space: normal; /* 小屏幕下允许内容换行，避免横向滚动过宽 */
  }
}

调整后的完整代码示例 #

<div class="container">
  <div class="table-responsive">          
    <table class="table content-fit-table">
      <thead>
        <tr>        
           <th class="style6">Year</th>
           <th class="style6">Person of The Year</th>
           <th class="style6">Citizen of the Year</th>              
           <th class="style6">Outstanding Service</th>              
           <th class="style6">Lifetime Achievement</th>              
           <th class="style6">International Category</th>              
           <th class="style6">Samantha Young Service Award</th>              
           <th class="style6">Central Chapter Awards</th>              
           <th class="style6">Other Awards</th>              
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="style9">1973</td>
          <td class="style9">Charles Johnson</td>
          <td class="style9">James Smith and Issac Smith</td>
          <td class="style9">&nbsp;</td>
          <!-- 补充剩余行内容 -->
        </tr>
      </tbody>
    </table>
  </div>
</div>

<style>
.content-fit-table th, .content-fit-table td {
  white-space: nowrap;
  padding: 8px;
}

@media (max-width: 768px) {
  .content-fit-table th, .content-fit-table td {
    white-space: normal;
  }
}
</style>

调整后，表格会根据单元格内的内容长度自动扩展宽度，不会强制换行；同时在小屏幕设备上，单元格会恢复自动换行，保证表格的可读性。

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