☰

表のセルを切り捨てながら、できるだけ多くのコンテンツを収めるにはどうすればよいですか? 質問する

tag-icon • tag-icon html css html-table overflow
表のセルを切り捨てながら、できるだけ多くのコンテンツを収めるにはどうすればよいですか? 質問する

フレッドに会いましょう。彼はテーブルです。

一方のセルにはコンテンツが多く幅広で、もう一方のセルにはコンテンツが少なく幅が狭い

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

フレッドのアパートは奇妙なことに大きさが変わる癖があり、他の部屋を押しのけてウィットフォード夫人のリビングルームを忘却の彼方に追いやらないように、フレッドは自分の部屋の一部を非表示にすることを学びました。

セルのサイズは同じになりましたが、1 つのセルのみの内容が切り捨てられており、もう 1 つのセルに空白があれば、両方のセルに収まるように見えます。

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

これはうまくいきますが、フレッドは、右のセル (彼は Celldito というニックネームをつけています) が少しスペースを空ければ、左のセルが切り捨てられることはそれほど多くないだろうという不安を感じています。彼の正気を保つことができますか?

要約: テーブルのセルが均等にオーバーフローし、すべての空白がなくなった場合にのみオーバーフローするにはどうすればよいでしょうか。

ベストアンサー1

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

おすすめ記事