Word wrapping in HTML Tables
Posted: Tue Oct 20, 2020 11:55 am
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
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