我有两个表格单元格，具有动态内容。
表格单元格 1 工作正常，当添加新内容使其大于表格单元格 2 时，表格单元格 2 的高度适合表格单元格 1 的高度，并且在宇宙中一切都很好。
但是，当新内容添加到表格单元格 2（隐藏了溢出，并且与 display: 块一起工作）时，它会扩展，溢出永远不会发生，并且表格单元格 1 的高度现在与表格单元格 2 匹配。
我想要的是当更多内容添加到表格单元格 2 时，它将显示内容到表格单元格 1，然后隐藏其余内容。我知道我可以在 javascript 中做到这一点，知道没有它怎么做吗？
这是一个 JSFiddle：http: //jsfiddle.net/dYsNx/
Col 2 的内容只能达到 col1 的高度，其余部分应溢出隐藏
溢出：隐藏不应该以这种方式使用。但是，你明白了这个概念。
其他人，我看到你的代码不是很干净并且保持标准。所以，我会以我的方式修改它（希望它更好）
请参阅以下链接：http: //jsfiddle.net/Edditoria/TGfzA/
如您所见，overflow: hidden;在 中#box，然后在position: relative;没有顶部/左侧设置的情况下进行设置。
为避免 IE<7 的 display:table 兼容性问题，请保持 CSS 中默认的 div 显示设置。我也会使用 % 而不是固定的 px 宽度来避免 IE 的显示问题！
假设 col1 是动态高度的基础，则无事可做。
在 col2（和所有其他列）中，您需要添加position: absolute; top: 0px; left: 50%;.
我将 col-x 从 ID 更改为 class，因为您以后可能需要添加更多列。
纯 CSS 是不可能的。这是来自 CSS 2.1 规范（http://www.w3.org/TR/CSS2/tables.html#height-layout）：
在 CSS 2.1 中，单元格框的高度是内容所需的最小高度。
'table-row' 元素框的高度是在用户代理获得行中的所有单元格后计算的：它是该行计算的“高度”的最大值，该行中每个单元格的计算“高度”，以及单元格所需的最小高度 (MIN)。