Word-wrap CSS property not affecting a table cell

Question

I have one long word...

p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"

...that I am trying to fit in a table cell (<td>), for which I've tried using word-wrap: break-word; and the like to force the text to wrap, but none of them seem to have any affect on the text.

( HERE'S THE LIVE EXAMPLE )

Click on the image to enlarge!

The text goes on and on horizontally, and doesn't wrap. Which CSS property am I supposed to be using here?

---

THE CODE

<table>
     <thead>
          <tr>
                <th>Name
                </th><th>Type
                </th><th>Value
                </th><th>TTL
          </th></tr>
     </thead>
     <tbody>
          <tr>
                <td>wtnmail._domainkey.whatthenerd.com.</td>
                <td>TXT</td>
                <td>"v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"</td>
                <td>300</td>
          </tr>
     </tbody>
</table>

CSS

Based on j08691's answer, I am using this now:

table {
   table-layout: fixed;
   word-break: break-all;
   word-wrap: break-word;
}

And that's resulted in this:

Click on the image to enlarge!

Yes, the table isn't super stylish as it used to be, but now I can at least be sure that the data shows (even when the browser is resized i.e. smaller resolutions).

Still looking for an elegant solution, if any.

Answer 1

In addition to your word-wrap rule on the cell, add the CSS rule table-layout:fixed to your table (and possibly a width).

jsFiddle example