13

3 を含むテーブル行がありますtd。中央tdにはテキストがあるため、特定の高さ (100px など) があります。

左と右の 2 つtdの s には、それぞれ (後で) クリック可能な領域を表示するテーブルが含まれていますtd。

残念ながら、Firefox だけが左右tdの s を 100% の高さに引き伸ばします。Chrome、Safari、IE は最小の高さに設定するだけです。

これがフィドルです：http://jsfiddle.net/X3YAu/

プロパティをいじってみましたが、display役に立ちませんでした。td100% の高さは親要素を参照していませんか? もしそうなら、親要素の 100% の高さに s ストレッチしないのはなぜですか?

4

8 に答える 8

16

&nbsp;を空にする<td></td>と役立つはずです。

追加情報:

そこには役に立たないタグがたくさんあるので、コードを完全に書き直しました。これはうまくいくはずです:

<table align="center" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" width="100%" height="20" colspan="3" bgcolor="#A9DBF5">
            <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_up.png" width="16" height="16" title="Up" alt="Arrow up" style="display:inline-block;" />
        </td>
    </tr>
    <tr>
        <td align="center" width="22" height="100">
            <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_left.png" width="16" height="16" title="Left" alt="Arrow left" style="display:inline-block;padding:3px;background:#A9DBF5;" />
        </td>
        <td align="left" height="100" bgcolor="#FFFFFF">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </td>
        <td align="center" width="22" height="100">
            <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_right.png" width="16" height="16" title="Right" alt="Arrow right" style="display:inline-block;padding:3px;background:#A9DBF5;" />
        </td>
    </tr>
    <tr>
        <td align="center" width="100%" height="20" colspan="3" bgcolor="#A9DBF5">
            <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_down.png" width="16" height="16" title="Down" alt="Arrow down" style="display:inline-block;" />
        </td>
    </tr>
</table>

ご覧のとおり、空の s を使用する代わりに、3 つの列に 1 つの td を完全に分散さ<td>せた引数を 1 つだけ配置しました。colspan="3"

ここにデモがあります: jsbin LINK

border-radiusコードをできるだけ短く維持するために、あなたがしたようにcssを使用しなかったことに注意してくださいborder。そうすれば、アイデアを得ることができます。

于 2012-08-31T10:05:49.867 に答える
6

のようなものはありませんheight: 100%.

height: 100%要素は、追加するソリューション&nbsp;またはトリックを実行する必要があるソリューションを渡すだけでは親の高さを埋めることはできませんtable {empty-cells: show;}が、特定の高さがないと、目的の効果が得られません。

于 2012-09-14T10:59:26.960 に答える
2

ソリューションでjQueryを使用しても大丈夫ですか？もしそうなら、あなたは以下を関数に入れてロード時にそれを呼び出すことができます、そしてテーブルがサイズ変更されるときはいつでも（それがサイズ変更された場合）

$('.ghost.column table').height($('.ghost.column').height())

また、テーブルを使用することがあなたの目標にとって最良のアプローチであるかどうか疑問に思いますか？<div>これには理由がありますか、それとも代わりに要素を使用してみることができますか？

作業デモ： http： //jsfiddle.net/X3YAu/14/

于 2012-09-14T12:33:25.297 に答える
1

別のスレッドでこの回答を見つけましたが、うまくいきました。このように、空白のセルに余分なスペースを入れる必要はありません。

td a {
  display: inline-block;
  height:100%;
  width:100%;
}
于 2013-05-28T17:22:54.783 に答える
1

最良の方法は、CSS の方法を使用することです。

table { empty-cells: show; }

この&nbsp;方法は良い方法ですが、少しハックです。

于 2012-08-31T10:18:50.387 に答える
0

空のセルの高さを 100% に保つには

<th>と<td>: _

th:empty::before,td:empty::before{content:'\00a0';visibility:hidden}

のみ<td>:

td:empty::before{content:'\00a0';visibility:hidden}

説明：

'\00a0'シングルスペースのコードです

visibility:hiddenその単一のスペースを非表示にする

于 2021-03-02T16:38:07.247 に答える