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

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;
}