How to deny "nowrap" to increase width of element?

Question

I have a structure like this:

<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>

with css

.one { width: 60%; }

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

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

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

I want the left cell always has width of 60% and the right cell to take all other space. A long single-lined text in the right cell should be truncated with ellipsis, both when "hint" element is and isn't visible.

I've tried to use display: inline, float: left, position: absolute, but didn't get any result that wouldn't ruin floating hint element at right side.

jsFiddle here: http://jsfiddle.net/Z2kLV/1/

Also, solution doesn't have to be cross-browser, I need it only for chrome.

Please, help, I can't get this done

The single-lined long text in the right cell should be truncated, so left cell will take its declared width of 60% — AlexXsWx, Jun 15 '13 at 18:47
Why are you using divs in the table? Is this what you want? http://jsfiddle.net/Z2kLV/2/ — adaam, Jun 15 '13 at 18:48
To make more 2 columns: one with the long text, other with the hint, which appears only when first one is hovered — AlexXsWx, Jun 15 '13 at 18:51
I see. sorry I'm using Firefox and its not compatible with it. I tried to follow this tutorial (http://davidwalsh.name/demo/css-ellipsis.php) on a new jsfiddle to try and see if i could achieve it but to no avail. Very strange (orig pg http://davidwalsh.name/css-ellipsis) — adaam, Jun 15 '13 at 18:59

score 4 · Accepted Answer · edited May 23 '17 at 11:45

4

I was searching not good enough, and now found my answer here

It is - add following css to the table element:

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

Working example on jsFiddle: http://jsfiddle.net/Z2kLV/5/

edited May 23 '17 at 11:45

Community

1
1

answered Jun 16 '13 at 19:04

AlexXsWx

123
2
10

How to deny "nowrap" to increase width of element?

1 Answers1