1

次の例を考える: http://jsfiddle.net/upsidown/z4m7r/

HTML:

<table class="main-table" cellspacing="20">
    <tr>
        <td style="height:100%;"><table class="sub-table"><tr><td>Some text</td></tr><tr><td class="bottom-align">Some bottom aligned element</td></tr></table></td>
        <td>Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. </td>
        <td>Some other text</td>
    </tr>
</table>

CSS:

.main-table {

    width:300px; 
    vertical-align: top;
}

.main-table td {

    vertical-align: top; 
}

.sub-table {

    height:100%;
}

td {

    border:2px solid black;
}

td.bottom-align {

    vertical-align: bottom;
    background:yellow;
}

黄色のセル テキストは、下部に垂直方向に配置する必要があります。これは Firefox では機能しますが、Safari / Chrome (webkit) ブラウザーでは機能しません。

どうすればそれを達成できるのでしょうか？前もって感謝します。

4

3 に答える 3

1

まず、なぜテーブルとネストされたテーブルを使用しているのですか? これは本当に表形式のデータですか?

あなたの問題に: Webkit はおそらく高さの CSS ルールに厳密に従っています。これは、含まれているブロックに明示的な高さがある場合にのみ、パーセント単位の高さが適用されることを示しています。

つまり、メイン テーブルに高さを指定する必要があります (セル/行の高さは、テーブルの高さとテーブル内の他のセル/行から明示的に計算されます)。そして、それがパーセントである場合は、次の親 (ここではbody) なども同様です。

だから、次のようなもの

.main-table { height: 500px; }

また

html, body, .main-table { height: 100%; }

役立ちます。

（ところで、height: 100%セル上では意味がありません。）

于 2013-03-05T14:00:15.277 に答える
1

簡単な解決策は、スペースをパディングで埋めることです。

td.bottom-align {
    padding-top:100%;
    vertical-align: bottom;
    background:yellow;
}

デモは次のとおりです。http://jsfiddle.net/z4m7r/11/

- 編集 -

親テーブルを 100% の高さに設定すると、うまくいくはずです。デモ: http://jsfiddle.net/z4m7r/9/

于 2013-03-05T14:03:51.940 に答える
-1

あなたの jsfiddle を更新しました: http://jsfiddle.net/z4m7r/6/

まず、別のテーブル内でテーブルを使用することはありません。マークアップの読み取りと保守が困難になるからです。1 つの行をテーブルの一番下に配置し、もう 1 つの行を一番下に配置することも困難です。代わりに、セル内に 2 つの div を配置します。

<td class="firstcell" style="height:200px;">
    <div>Some text</div>
    <div class="bottom">Some bottom aligned text</div>
</td>

次に、親セルの位置を相対に設定し、下部の div を絶対にしました。

.firstcell {
    position: relative;
    width: 100px;
}

.firstcell > div {
    border: solid thin black;
}

.bottom {
    position: absolute;
    bottom: 0;
    background: yellow;
}
于 2013-03-05T13:55:05.677 に答える