HTML Email - Can't restrict width - html

Question

I'm charged with 'rebranding' our IT department communications. I wanted to do our email notifications in pure HTML / CSS to ensure it's portability.
Below is the code, which looks exactly how I want it to in Outlook, however as soon as content is added to the main the words wont wrap correctly and if any content goes further than about 90% of the main content window, the other table components start to stretch!
I've tried all sorts of combinations of 'word-wrap' and 'overflow' at all levels in the table but I can't seem to have it.
My end goal is to have the entire table fixed width, with any long format information expanding down.
<table style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
<tr style="border: 1px solid gray;">
<td style="height: 75px; width: 80px; text-align: center; font-size: 60px; font-weight: bold; color: White; background : #007F0E;border-bottom: 1px solid gray;">i</td>
<td style="height: 75px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
<td style="height: 75px; padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
<table>
<tr>
<td><div style="height: 36; text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</div></td>
</tr>
<tr>
<td><div style="height: 36;text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</div></td>
</tr>
</table>
</td>
<td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
</tr>
<tr>
<td colspan="99" style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;">This is the main TD</td>
</tr>
<tr>
<td colspan="99" style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE"> | </b><b>Ext : </b> XXXX<b style="color: #0088CE"> | </b><b>Email : </b> Link<b style="color: #0088CE"> | </b><b> Portal : </b> Link</td>
</tr>
</table>
Any help is greatly appreciated, this one minor issue is taking me way to long to overcome!
Good:
Bad (this is just random, wordwrapped text):

Answer 1

You have a few errors in your html:
you don't need a nested table for the right header section. Just the <div> portions are enough.
you should set widths for the 'Information' and 'Company name' <td> cells to prevent arbitrary wrapping.
your colspan value should be colspan="4", not colspan="99"
Anyways, to solve your problem you can add style="table-layout: fixed;" to your main table element, to allow yourself to set a more predictable table layout.
https://css-tricks.com/fixing-tables-long-strings/

Answer 2

In the end it was definitely related to the use of COLSPAN.
Instead I replaced the 'heading' piece with a nested table and that resolved the issue.
The specific code I used:
<table border="0" cellpadding="0" cellspacing="0" style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
<tr>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;padding: 0px; border-collapse: collapse;">
<tr>
<td style="height: 75px;text-align: center; font-size: 60px; font-weight: bold; color: White; width: 80px; background : #007F0E;border-bottom: 1px solid gray;">i</td>
<td style="height: 75px;width: 200px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
<td style="height: 75px;padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
<table>
<tr>
<td style="text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</td>
</tr>
<tr>
<td style="text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</td>
</tr>
</table>
</td>
<td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
</tr>
</table>
</tr>
<tr>
<td style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;"></td>
</tr>
<tr>
<td style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE"> | </b><b>Ext : </b> XXXX<b style="color: #0088CE"> | </b><b>Email : </b> Link<b style="color: #0088CE"> | </b><b> Portal : </b> Link</td>
</tr>
</table>
It is certainly painful but unfortunately working with in the constraints of not only Outlook, but also our helpdesk application which doesn't allow direct HTML code. The only way is to directly copy a table in (which is why I've tried to contain it all in a single table!)