Force table column widths to always be fixed regardless of contents

Issue

I have an html table with table-layout: fixed and a td with a set width. The column still expands to hold the contents of text that doesn't contain a space. Is there a way to fix this other than wrapping the contents of each td in a div?

Example: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

In the example, you can see that the column with AAAAAAAAAAAA... expands despite being explicitly set to 50px wide.

Solution

Specify the width of the table:

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

See jsFiddle

Answered By - Arie Xiao