Question

I have a table cell that keep resisting to wrap it contents (a span). Here is the escenario according to Chrome dev tools:

The <td> has the following rules:

overflow:visible;
white-space:normal;

The <table> has:

table-layout:fixed;

First row in the table has two columns with fixed width defined; the problematic cell has padding="2".

From my knowledge that should do, but it is not wraping the contents. I have tried unsuccessfully with the following rules:

word-break: break-all;
word-wrap: break-word;
max-width: 120px; /*this is the max width I want to ensure*/

What am I missing here?

Answer 1

I don’t know exactly how is your code because you didn’t post it, but I followed your instructions and it worked for me.

See it here: http://jsfiddle.net/FJ7dB/

HTML:

<table>
    <tr>
        <td>TD-1-1</td>
        <td padding="2">
            <span>TD-1-2 ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</span>
        </td>
    </tr>
    <tr>
        <td>TD-2-1</td>
        <td>TD-2-2</td>
    </tr>
</table>

CSS:

table{
    table-layout:fixed;
    border:1px solid blue;
}
td{
    width:120px;
    max-width:120px;
    word-break: break-all;
    word-wrap: break-word;
    border:1px solid red;
}

What makes it work is max-width, which you said it was unsuccessful.

And it isn’t necessary to set

overflow:visible;
white-space:normal;

because visible and normal are their default values.