0

任意の (認識できない) データの 2 つの列を持つテーブルのようなレイアウトを作成しようとしています。2 番目の列には、非常に長い文字列 (特に URL) が含まれる可能性があります。最初の列の幅が最も広いセルに対応し、2 番目の列の幅が残りのスペースを親の境界まで埋めるようにテーブルを設定したいと思います。

残念ながら、すべてのブラウザーでこれらの要件の両方を達成することはできないようです。どちらか一方だけです。

私の最初の考えはこれでした：

<div>
    <dl style="display: table-row;">
        <dt style="display: table-cell; white-space: nowrap;">abc</dt>
        <dd style="display: table-cell; word-wrap: break-word;">asdfasdfadfadsfadfadf</dt>
    </dl>

    ...
</div>

そしてFirefoxでは、これは完全に機能します。それぞれ<dl>が として機能し<tr>、最初の列は最も広い とまったく同じ幅<dt>です。

ただし、WebKit と Opera (なぜではないのか) では、これにより 2 番目の列 ( <dd>s) が の境界をオーバーフローし<div>ます。

親<div>を次のように変更することで、その問題を修正できました。

<div style="display: table; table-layout: fixed;">

しかし、これを行うと、すべてのブラウザー (Firefox を含む) が各列を親の幅の正確に 50% にするように強制されます。これは、通常、最初の列が 2 番目の列よりも狭くなるため (無駄なスペースにつながる)、理想的ではありません。

私が話していることが明確でない場合は、いくつかの図を次に示します。

最初の列の幅を明示的に定義せずにこれを行う方法はありますか? 従来のブラウザーは問題ないので、CSS3 であれば問題ありません。

4

1 に答える 1

1

これは、FirefoxとChromeでうまくいくようです：

<div style="display:table; table-layout:auto; width: 100%;">
    <dl style="display: table-row;">
        <dt style="display: table-cell; white-space: nowrap;">abc</dt>
        <dd style="display: table-cell; word-wrap: break-word;
            word-break:break-all;">
            asdfasdfadfadsfadfadf asdfasdfadfadsfadfadf
            asdfasdfadfadsfadfadf asdfasdfadfadsfadfadf</dd>
    </dl>
</div>

Jsfiddle: http://jsfiddle.net/kingmotley/AFHnE/6/

于 2013-06-13T20:04:35.510 に答える