Word wrapping in HTML Tables

[Wasindear]

So my character and their friend have started making a game using the dice they found. I have been writing down the rules they have been making up and the time has come for them to write them down in character. However I am having a real difficulty in getting the html table to word wrap automatically. Could anyone with more experience with Cantr html peculiarities offer some advice please?

Here is the current code I've been trying:

<table style="width: 310px;word-wrap:break-all;table-layout: fixed;">
<tbody>
<tr>
<td style="width: 90px; text-align: center;">Example text that is long enough to overflow</td>
<td style="width: 220px; text-align: center;">Why won't you wrap? I've done everything I can think of! OH GOD JUST WRAP! T_T </td>
</tr>
</tbody>
</table>

and here is the style tag:

<style type="text/css">
table,th,td {
border:1px solid black;
border-collapse:collapse;
word-wrap:break-all;
}
th,td {
padding:2px;
text-align:middle
}
</style>

And results in this:



Which is also interesting because it highlights the text is wrapping just not in anyway that makes sense to me!!

Any help, advice, or even commiseration at this point, would be greatly appreciated

[Wasindear]

I have found the solution

table,th,td {
border:1px solid black;
border-collapse:collapse;
word-wrap:break-all;
white-space:normal
}



leaving this thread though for future generations

[alecto]

Oh thank the stars it's not just me, lol

...Although I seem to be having the opposite problem, where tables and lists are wrapping where I don't want them to, argh.

I've found this works, mostly:

white-space:nowrap