title: How to prevent a table cell from having a line break in CSS?
body: <p>I have an HTML document with some tables like this:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              term
          &lt;/td&gt;
          &lt;td&gt;
              this is a definition
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This appears like this:</p>
  
  <pre><code> _____________________________
  | term | this is a definition |
  |______|______________________|
  </code></pre>
  
  <p>When I type a two-word word, such as "Web browser" in the first column, this is the result:</p>
  
  <pre><code> _____________________________
  | Web     | a tool for using  |
  | browser | the WWW           |
  |_________|___________________|
  </code></pre>
  
  <p>How can I adjust this behavior in CSS such that the first column only gets line breaks when the content is longer than 50% of the table width?</p>
  
  <p>Ideally, the term in the left cell should never have a line break:</p>
  
  <pre><code> _____________________________
  | Web browser | a tool for    |
  |             | using the WWW |
  |_____________|_______________|
  </code></pre>
  
  <p>If the term in the left cell is really long though, e.g. exceed 50% of the width of the table, then a line break is okay:</p>
  
  <pre><code> _____________________________
  | this is a long | .......... |        
  | term           | .......... |
  |________________|____________|
  </code></pre>
  
  <p>How can this be done in CSS?</p>