3

2行2列のテーブルがあるとします。次に、2番目の列の行をマージし、この列に数行のテキストを入力します。

|------|------|
|      | text |
|------| text |
|      | text |
|------|------|

私のブラウザ（IE 8、標準モード）は、最初の列の行を同じ高さに自動的にサイズ変更します。2番目の列に行を追加すると、最初の列の行のサイズが大きくなります。これで、最初の列の行の1つにテキストが追加されると、IEはその行を拡張してテキストを含め、残りの高さを他の行に分配します。

問題は、テキストが2番目の列に追加されたときに、最初の列の行のテキストが移動しないようにすることです。（コントロールはjavascriptを使用して動的に表示または非表示になり、左側の列のサイズが毎回変更されます）。また、最初の列のテキストをそのセルの上部に配置し、セル1と2のテキストの間に余分なスペースがないように、左上のセルのサイズを設定します。

|---------|--------|
|text     |text    |
|---------|        |
|text     |text    |
|         |text    |
|         |        |
|---------|--------|

左上のセルにvertical-align：topを配置すると、そのセル内のテキストが目的の場所に配置されますが、これらのセルの実際のサイズはレンダラー。セルの高さを設定しようとしています-style="height：100px;" どちらも機能していないようです。高さを手動で指定する必要はありません。IEで左上のセルの高さを最小化して、余分なスペースがなく、テキストが2番目の列に追加されたときにテキストが移動しないようにします。

4

2 に答える 2

2

テーブルを使用する必要がありますか？このような効果は、CSSを使用するとおそらくより簡単に実現できます。

HTML：

<div class="row">
    <div class="col1">
        Row 1 Title                    
    </div>
    <div class="col2">
        Row 1 text<br />
        more text<br />
        even more text
    </div>
</div>
<div class="row">
    <div class="col1">
        Row 2 Title
    </div>
    <div class="col2">
        Row 2 text<br />
        more text<br />
        even more text<br />
        still more text
    </div>
</div>
<div class="row">
    <div class="col1">
        Row 3 Title
    </div>
    <div class="col2">
        Row 3 text<br />
        more text<br />
        even more text<br />
        still more text<br />
        yet another line of text
    </div>
</div>

CSS：

.row {
    margin-bottom: 10px;            
    overflow: hidden;
}
.col1, .col2 {
    float: left;
}
.col1 {
    margin-right: 10px;
}

JSFiddle

于 2012-09-10T14:48:51.413 に答える
1

私はそれを理解していると思います。最初にテキストが含まれていないセルがある場合、そのセルの高さはありませんが、その後テキストを追加すると、同じ列のその下のセルがジャンプして、セルに新しく追加されたテキスト用のスペースを確保します。 （たとえば、A1）。

空白のセルに（エンコードされたスペース）を追加する&nbsp;と、実際に表示されるコンテンツを追加しなくても、そのセルに1行のテキストの高さがあります。

于 2012-09-10T15:26:44.853 に答える