1

私は例を持っています：

<table class="border" style="width:100%">
<tr>
    <td style="width:30%" class="border p10">
        Test
    </td>
    <td style="width:70%" class="border p10">
        <p class="longText">
        Looong text Looong text Looong text Looong text Looong text Looong text Looong text Looong text
        </p>
    </td>
</tr>

CSS：

.longText {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:100%
}

.border {border: solid 1px #ccc}
.p10 {padding: 10px}

ここで試すことができますhttp://jsfiddle.net/rnwCw/20/

問題は、長いテキストがセルの幅（30％と70％）を破壊することです。.longTextの幅をPXに設定した場合（たとえば200px）、テーブルは問題ありません。しかし、<P>がセルの100％を占める必要があります。この問題を解決する方法は？

4

3 に答える 3

5

あなたは適用する必要がありますtable-layout:fixed：

table {
    table-layout:fixed;
}

ここでフィドルを参照してください：http：//jsfiddle.net/hARt5/これはあなたが達成したい結果ですか？これで、テーブルの行の比率は30/70になります。

于 2012-11-06T13:17:16.030 に答える
0

単語ごとに行を分割するのに役立つwhite-space:nowrap;addを削除 します。word-wrap

.longText {
    overflow:hidden; 
    text-overflow:ellipsis;width:100%;
    word-wrap:break-word;
}
于 2012-11-06T13:19:52.373 に答える
0

モニターにもよりますが、100％はブラウザの幅全体を占めます。上記のように、table-layout：fixedを使用するか、％の代わりにpxを使用して、任意のモニター解像度でテーブルを修正します

于 2012-11-06T15:45:50.770 に答える