Why is my text not wrapping in my table cell?

Question

I have created a parent table with two columns and within each column I have 6 child tables (3 in each) so I looks like a newsletter.

What I want is for the child table to extend down as I fill them with X amount of text but it's not working. I have set my child table widths and have set the CSS to table-layout:fixed; but when I type too much into one of the child tables the text flows out instead of wrapping.

It's strange because when I first created the tables it worked perfectly but now I can't figure out what I've done to stop it from working.

And before people tell me to use divs, I'm using tables as it's going to be an email flyer for Outlook.

Fiddle

HTML:

<table width="700" border="0" cellspacing="0" cellpadding="0">

  <tr>
    <td width="350" valign="top" bgcolor="#FFFFFF" style="padding-top:10px;" scope="row">

      <center>

        <table width="90%" border="0" height="100%" cellpadding="0" cellspacing="0" class="content">
          <tr>
            <td height="30px" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td  valign="top" bgcolor="#F4F4F4" scope="row" style="padding:10px;">&nbsp;</td>
            </tr>
          </table> 

        </center>   
        <br /> 

    <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30px" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td valign="top" bgcolor="#F4F4F4" style="padding:10px;" scope="row">&nbsp;</td>
            </tr>
          </table>         
        </center>
        <br>

      <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td bgcolor="#F4F4F4" scope="row" valign="top" style="padding:10px;">&nbsp;</td>
            </tr>
          </table>         
        </center>


    <td width="350" valign="top" bgcolor="#FFFFFF" style="padding-top:10px;">

      <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30px" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td valign="top" bgcolor="#F4F4F4" style="padding:10px;" scope="row">&nbsp;</td>
            </tr>
          </table>         
        </center>
        <br>


      <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td bgcolor="#F4F4F4" scope="row" valign="top" style="padding:10px;">&nbsp;</td>
            </tr>
          </table>         
        </center>
        <br />

      <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td bgcolor="#F4F4F4" scope="row" valign="top" style="padding:10px;">&nbsp;</td>
            </tr>
          </table>         
      </center>

      </td>
  </tr>
</table>

CSS

body {
    padding:0px;
    margin:0px;
    background-color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
}

table {
    table-layout:fixed;
}

strong {
    color:rgb(255,255,255);
    font-size:14px;
}

Answer 1

Normal text will wrap just fine. Very long words will indeed not wrap, but I doubt if you would have words that long.

If so, you could consider adding ­ in them to add soft hyphens. There are even libraries that can add those for you based on dictionaries, depending on any scripting languages you have access to.

In addition to that you might implement @NickRs suggestion to be safe, but remember that it will break the word in any place, so it might break in a place that is ugly or inconvenient. Not really what you would want in a newsletter.

Answer 2

Adding word-break to the <td> will fix this.

word-break:break-all;

JSFiddle demo