表格单元格响应式问题求助：首单元格需限制最大宽度450px

你的问题出在表格默认布局行为与属性设置的冲突上，以下是具体修复方案：

问题根源 #

1. 表格默认使用table-layout: auto布局，浏览器会根据单元格内容自动计算列宽，导致你设置的max-width无法生效。
2. nowrap属性强制单元格内容不换行，会进一步撑开单元格，突破宽度限制。

修复步骤 #

• 给内层表格添加table-layout: fixed;样式，让表格严格遵循设置的宽度规则，而非内容长度。
• 移除第一个单元格的nowrap属性，允许内容自动换行。
• 调整单元格宽度设置，确保第一个单元格的max-width: 450px生效，同时让另外两个单元格根据内容自适应宽度。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body {
              height: 100%;
            }
        </style>
    </head>
    <body>

<table style="height: 100%; width: 100%;">
    <tr>
        <td align="center">
        <!-- Page body -->
        <div ID="PageBody">
            <table border="1" style="width: 98%; table-layout: fixed; padding:0; margin:0;">
              <tr>
                <td align="center" style="width: 100%; max-width: 450px;">
                  <div style="width: 100%; max-width: 450px; background-color: blue; word-wrap: break-word;">Main content</div>
                </td>
                <td align="center" style="width: fit-content;"><div>content 2</div></td>
                <td align="center" style="width: fit-content;"><div>content 3</div></td>
              </tr>
            </table>
          </div>
        <!-- Page body -->
    </td>
    </tr>
</table>
    </body>
</html>

额外说明 #

• table-layout: fixed让表格列宽优先遵循设置的宽度值，避免内容过度撑开单元格。
• 给蓝色div添加word-wrap: break-word，确保长文本能自动换行，防止撑破容器。
• 另外两个单元格设置width: fit-content，使其根据自身内容自适应宽度。

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