title: How to limit a table cell to one line of text using CSS?
body: <p>I have a table of users where each row contains their names, e-mail address, and such. For some users this row is one text line high, for some others two, etc. But I would like that each row of the table be one text line high, truncating the rest.</p>
  
  <p>I saw these two questions:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/2779779/a-column-of-a-table-needs-to-stay-in-one-line-html-css-javascript">A column of a table needs to stay in one line (HTML/CSS/Javascript)</a></li>
  <li><a href="https://stackoverflow.com/questions/1318108/css-limit-element-to-1-line">CSS: limit element to 1 line</a></li>
  </ul>
  
  <p>In fact my question is exactly similar to the first one, but since the link is dead I can't study it. Both answers say to use <code>white-space: nowrap</code>. However this doesn't work, maybe I'm missing something.</p>
  
  <p>Since I can't show you the code, I reproduced the problem:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  td {
      white-space: nowrap;
      overflow: hidden;
      width: 125px;
      height: 25px;
  }
  &lt;/style&gt;
  
  &lt;div style="width:500px"&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;lorem ipsum here... blablablablablablablablablabla&lt;/td&gt;
          &lt;td&gt;lorem ipsum here... blablablablablablablablablabla&lt;/td&gt;
          &lt;td&gt;lorem ipsum here... blablablablablablablablablabla&lt;/td&gt;
          &lt;td&gt;lorem ipsum here... blablablablablablablablablabla&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Without <code>white-space</code> the table is 500px wide, and the text takes more than one line.</p>
  
  <p>But <code>white-space: nowrap</code> makes the browser simply ignore the <code>width</code> directive and increase the width of the table until all data fits in one line.</p>
  
  <p>What am I doing wrong? </p>