IkouKuhn IkouKuhn - 1 month ago 9
CSS Question

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

I'm trying to use nowrap on td properties so that the result can be seen on the first table:

View

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:
enter image description here

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

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