動的コンテンツを含む2つのテーブルセルがあります。
テーブルセル1は正常に機能し、新しいコンテンツが追加されてテーブルセル2よりも大きくなると、テーブルセル2の高さはテーブルセル1の高さに適合し、すべてが宇宙にうまくいきます。
ただし、新しいコンテンツがテーブルセル2（オーバーフローが非表示になっていて、display：blockで正常に機能する）に追加されると、コンテンツが拡張され、オーバーフローが発生することはなく、テーブルセル1の高さがテーブルセル2と一致するようになります。
私が欲しいのは、テーブルセル2にコンテンツが追加されると、テーブルセル1までのコンテンツが表示され、残りは非表示になります。私はJavaScriptでそれを行うことができることを理解しています、それなしでそれを行う方法はありますか？
これがJSFiddleです：http：//jsfiddle.net/dYsNx/
列2は、コンテンツの列1の高さまでしか上がらない必要があり、残りはオーバーフローして非表示にする必要があります
overflow: hidden をそのように使用しないでください。しかし、あなたは概念を理解します。
その他、あなたのコードはあまりきれいではなく、標準に保たれていることがわかりました。だから、私は自分のやり方でそれを修正します（それがより良いことを願っています）
次のリンクを参照してください: http://jsfiddle.net/Edditoria/TGfzA/
ご覧のとおり、 にoverflow: hidden;あり#box、position: relative;上/左の設定なしで設定します。
IE < 7 の display:table 互換性の問題を回避するには、CSS でデフォルトの div 表示設定を維持してください。IE の表示の問題も回避するために、固定の px 幅ではなく % を使用します。
col1 が動的な高さのベースであると仮定すると、何もする必要はありません。
col2 (および他のすべての列) では、 を追加する必要がありますposition: absolute; top: 0px; left: 50%;。
後で列を追加する必要があるかもしれないので、col-x を ID からクラスに変更します。
純粋な CSS では不可能です。これは CSS 2.1 仕様 ( http://www.w3.org/TR/CSS2/tables.html#height-layout ) からのものです。
CSS 2.1 では、セル ボックスの高さは、コンテンツに必要な最小の高さです。
「table-row」要素のボックスの高さは、ユーザー エージェントが行内のすべてのセルを利用できるようになると計算されます。これは、行の計算された「高さ」、行内の各セルの計算された「高さ」の最大値です。およびセルに必要な最小の高さ (MIN)。