You (OP) have bumped into a long-standing forum bug. The earliest topic/post about it (that I can find) is from 2014:
the table above is shown correctly in the previewwindow for the post, but after posting the spacing of first column is squashed.
In that same topic, Foxpup figured out the cause:
Basically, there's a bit of CSS that prevents a gap from appearing between the post icon and the post subject. Without that CSS, your example
[table] would display correctly (like it does when previewed: without the first column being "squashed"), but, then a gap between every post's icon and subject would be visible, like this:
The bug is that that CSS selector is "selecting" more
<td>s than it's supposed to (I mean, it's correctly selecting the
<td>s it means to, but it's
also selecting other
<td>s by mistake).
The quickest fix would be for theymos to change the selector from this:
div#bodyarea table.bordercolor td td td.td_headerandpost td:first-child
To this:
div#bodyarea table.bordercolor td td td.td_headerandpost > table td:first-child
(Haha, I mean, there are various ways to fix this, like adding a class="post_icon" to the relevant <td>s and simplifying the selector, or just putting a width="26" on those <td>s, etc., but, that's the least disruptive fix, I think. That second selector, right to left, reads: select all the first-child <td>s that are inside <table>s that are directly parented by <td class="td_headerandpost">s that are inside <td>s that are inside <td>s that are inside <table class="bordercolor">s that are inside <div id="bodyarea">, at least, I think that's what it says.) 
The problem with fixing bugs like these is that people have been working
around them for so long, that I'd be worried about breaking the workarounds (I mean, they wouldn't be
needed anymore, so I'm not talking about that, I'm talking about workaround-remnants displaying in new and subtle ways post-fix). I'd also be worried about changing the
environment in which old posts were written, like the first post I linked to: right now, that topic makes sense, you can
see the problem that original poster was talking about, but if this bug were fixed, then their example
[table] wouldn't be broken, and it would look as though they were confused when they made that post. Basically, the best way to fix problems like these is to leave them affecting posts made
before the fix. I can think of a few ways to fix this bug cleanly, but it's going to take a lot of testing before I'd feel comfortable putting together a patch and asking theymos to merge it.
In the meantime, the best way to tackle your problem (IMHO), is to use the
[nbsp] tag:
A
non-breaking space is a way to prevent a piece of text from "breaking" into multiple parts when there's not enough room for it to fit comfortably. This can be useful when formatting tables
(...)Basically, you should force the column to be wider by making at least one "rigid" width-defining cell. In your case, you could do that by "gluing" together the first column title with three
[nbsp] tags, like this:
[td][b][u][color=#9966ff]New[nbsp]Added[nbsp]DT1[nbsp]Members[/color][/u][/b][/td]
: I've started to work on this one. Keep an eye out for a future Meta topic called: Squishing the squashed-column bug (SMF patch).
