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

Answer 1

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/