Question

I have got a simple table like this:

<table>
<tr>
   <td id="col1"><p>test1</p></td>
   <td id="col2">
        <p>[e-mail]</p>
        <p>[e-mail]</p>
        <p>[e-mail]df</p>
   </td>
   <td id="col3"><p>10 April 2010 4:33 PM</p></td>
</tr>
</table>

And some CSS:

table{
  width: 300px;
}

#col1{
    width: 100px;
}

#col2{
    width: 100px;
    max-width: 100px;
}

#col3{
    width: 100px;
}

p{
    word-wrap: break-word;
}

And a fiddle of the above: http://jsfiddle.net/ypMQX/

I have fixed the width of the table and each column. I have also set word-wrap to break-word for all paragraph elements. I then set a max width to #col2. Why is it that column 2 is allow to expand so much without wrapping even though I have set it to break-word?

I would like all my columns to have a fixed width, and then have the content inside wrap. How can this be achieved?

Answer 1

What browser you’re testing on ? I’m on firefox and this is what I see

Anyway this breaks on IE, you can add another selector for paragraph along with your #col2 like:

#col2, #col2 p {
  width: 100px;
  max-width: 100px;
}