如何限制表格内div元素宽度为400px？

问题背景 #

现有CSS和HTML代码如下：
原始CSS：

table {
  border: 1px solid;
  width: 400px;
}

HTML（不可修改）：

<link rel="stylesheet" href="mytablediv.css">
<table><tr><td>table</td></tr></table>
<table><tr><td><div style="width:1000px;">div</div></td></tr></table>

需求：固定表格宽度为400px，限制表格内的div宽度不超出表格，之前尝试div{ max-width:100% !important;}无效。

解决方案 #

核心是修改表格的布局模式，同时限制内部元素的溢出：

table {
  border: 1px solid;
  width: 400px;
  /* 开启固定布局，让表格严格遵循设置的宽度，不被内容撑开 */
  table-layout: fixed;
}

table td {
  /* 限制单元格内内容溢出，避免撑大单元格 */
  overflow: hidden;
  /* 可选：如果需要内容自动换行，添加以下属性 */
  /* word-wrap: break-word; */
}

table td div {
  /* 强制div最大宽度为父元素（单元格）的100%，覆盖行内样式 */
  max-width: 100% !important;
  /* 重置div宽度为自适应，彻底取消行内的固定宽设置 */
  width: auto !important;
}

原理说明 #

1. table-layout: fixed：将表格从默认的内容自适应布局改为固定宽度布局，表格宽度完全由width属性控制，不会因内部宽内容被撑开。
2. td { overflow: hidden }：确保单元格内超出宽度的内容被隐藏，不会突破单元格边界。
3. div { max-width:100% !important; width:auto !important; }：直接覆盖div的行内width:1000px样式，让div的宽度自适应父单元格，最大不超过单元格宽度。

内容的提问来源于stack exchange，提问作者Ринат