列表内容超出表格单元格问题求助：相同CSS在不同页面表格中表现不一致

我来帮你梳理这个问题的原因和修复方案～

首先，两个页面的表格布局差异（比如表格的table-layout属性、单元格宽度限制）是导致同一CSS表现不同的核心原因，再加上你的CSS里的宽度和边距设置叠加，触发了单元格溢出的问题。

问题分析 #

1. 你的.birthplace设置了width:90%，同时.birthplace span又加了margin-left:5%，这两个值叠加后，实际占用的宽度可能超过了表格单元格的可用空间（尤其是当单元格本身宽度被限制时），导致文本溢出。
2. margin:0 auto在某些表格布局下会让列表没有完全占满单元格的可用宽度，但在另一个页面因为单元格足够宽所以没暴露问题，移除后又会让列表左移破坏布局。
3. 如果其中一个表格设置了table-layout: fixed，单元格就不会自动扩展容纳内容，而另一个表格用了默认的auto布局，所以表现正常。

修复方案 #

1. 统一表格布局行为

给两个页面的目标表格添加以下CSS，确保单元格能自动根据内容调整宽度：

table {
  table-layout: auto;
  width: 100%;
}

2. 调整列表的CSS，避免宽度叠加溢出

修改你的.birthplace相关样式，用padding替代margin来控制缩进，确保内容不会超出单元格：

.birthplace { 
  margin: 0; /* 去掉auto margin，改用padding控制左侧缩进 */
  padding: 0 0 0 5%; /* 左侧padding替代span的margin，不额外增加宽度 */
  list-style: none; 
  counter-reset: section; 
  line-height: 1.2; 
  text-align: left; 
  font-size: small; 
  width: 100%; /* 让列表占满单元格的可用宽度 */
}
.birthplace li span { 
  display: block; 
  text-indent: 15px; 
}
.birthplace li:before { 
  counter-increment: section; 
  content: "("counter(section)")"; 
  margin-right: 5px;
}
/* 移除.birthplace span的margin-left，统一用父元素padding控制缩进 */

3. 确保文本自动换行

如果单元格还是有溢出，给目标td添加以下样式，强制文本换行：

td {
  white-space: normal;
}

为什么这样有效？ #

• 改用width:100%让列表完全适应单元格宽度，再用padding控制缩进，避免了margin带来的额外宽度叠加问题。
• table-layout: auto会让表格根据内容自动调整列宽，确保单元格能容纳列表内容。
• 去掉margin:0 auto避免了在窄单元格里的对齐异常，同时保留了缩进效果。

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