4

私はこのような構造を持っています:

<table>
<tr>
    <td class = "one">This cell should has width 60%</td>
    <td class = "two">
        <div>
            <div class = "three">Hint</div>
            <div class = "four">
                And ending of this string should be cutted out with ellipsis, no matter how long string will be
            </div>
        </div>
    </td>
</tr>
</table>

CSSで

.one { width: 60%; }

.three {
    display: none;
    float: right;
}

.two:hover .three { display: block; }

.four {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

左のセルの幅は常に 60% で、右のセルは他のすべてのスペースを取る必要があります。「ヒント」要素が表示されている場合と表示されていない場合の両方で、右側のセルの長い一行テキストは省略記号で切り詰める必要があります。

display: inline、float: left、を使用しようとしましたposition: absoluteが、右側の浮動ヒント要素を台無しにしないような結果は得られませんでした。

jsFiddle はこちら: http://jsfiddle.net/Z2kLV/1/

また、解決策はクロスブラウザーである必要はありません。クロムにのみ必要です。

助けてください、私はこれを成し遂げることができません

4

1 に答える 1

4

私は十分に検索していませんでしたが、ここで私の答えを見つけました

それは - 次の css を table 要素に追加します。

table {
    width: 100%;
    table-layout: fixed;
}

jsFiddle での作業例: http://jsfiddle.net/Z2kLV/5/

于 2013-06-16T19:04:12.973 に答える