title: td with white-space:nowrap text exceed outside of the cell
body: <p>I'm trying to use nowrap on td properties so that the result can be seen on the first table:</p>
  
  <p><img src="https://i.stack.imgur.com/dGiwB.jpg" alt="View"></p>
  
  <p>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:</p>
  
  <pre><code>&lt;table cellspacing="0"&gt;
      &lt;tr&gt;
          &lt;td class="content" style="width: 1%; white-space: nowrap; max-width:300px"&gt;
              /*php content*/
          &lt;/td&gt;
          &lt;td class="author"&gt;
              /*php content*/
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;div class="post"&gt;
  &lt;table cellspacing="0"&gt;
      &lt;tr&gt;
          &lt;td class="content" style="max-width:300px"&gt;
          /* php content */
          &lt;/td&gt;
          &lt;td class="author"&gt;
              /* php content */
          &lt;/td;&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div class="nav"&gt;
          /* php content for navigation buttons */
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>But the result is like this:
  <img src="https://i.stack.imgur.com/EbHdz.jpg" alt="enter image description here"></p>
  
  <p>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?</p>