max-width 50% for td

Question

HTML

<table>
    <tr>
        <td>td1td1td1td1 td1td1td1td1td1td1td1td1td1td1td1</td>
        <td>td2</td>
    </tr>
</table>

CSS

td{
    border:black thin solid;
    max-width:50%;
}
table{
    width:100%
}

I want to set the max width of the td to 50%, but it isn’t working for me ...
Hope someone could help on this.

Please view the output on: http://jsfiddle.net/38bf2/

P.S.
I already try to view the result via Chrome and Firefox.

Answer 1

Add table-layout:fixed;. Change your CSS on the table to:

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

jsFiddle example