Question

I have an example:

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

You can try it here http://jsfiddle.net/rnwCw/20/

The problem is that the long text destroys the width of the cells (30% and 70%). If I set width for .longText to PX for example 200px so the table is OK. But I need that <P> takes 100% of the cell. How to solve this problem?

Answer 1

You should apply table-layout:fixed:

table {
    table-layout:fixed;
}

Please see fiddle here: http://jsfiddle.net/hARt5/ Is this the result you wish to achieve? Now table rows have 30/70 proportion.