td with white-space:nowrap text exceed outside of the cell - html

Question

I'm trying to use nowrap on td properties so that the result can be seen on the first table:
As you can see, on the first table, it wrapped nicely.
But on the second table the first "td" exceeding it's second "td" because the content is too long.
How do I fix this?
Here's my code:
<table cellspacing="0">
<tr>
<td class="content" style="width: 1%; white-space: nowrap; max-width:300px">
/*php content*/
</td>
<td class="author">
/*php content*/
</td>
</tr>
</table>
To make it more clear, here's what I'm trying to do:
At first I created a list which each element is a table, here's what each of the list code:
<div class="post">
<table cellspacing="0">
<tr>
<td class="content" style="max-width:300px">
/* php content */
</td>
<td class="author">
/* php content */
</td;>
</tr>
</table>
<div class="nav">
/* php content for navigation buttons */
</div>
But the result is like this:
As you can see on the first list, there are white spaces between "test 1" and the "admin todo" status.
I want to remove it, therefore I use the nowrap method. If this impossible, is there any alternative method?

Answer 1

If I interpretate correctly the question and understand your expected results i suggest you tu use text-overflow
Since you stated 300px as width of td.content and still want the content to be rendered in one line only, I guess the only solution is to hide the exceding content. It can be done with this simple CSS:
.content{
text-overflow:ellipsis;
overflow:hidden;
}