title: html table - collapse all but one column
body: <p>I have a html table with several columns. In case the table does not fit in the page horizontally, I would like all but one column to collapse (instead of a horizontal scrollbar to appear on the page).</p>
  
  <p>By collapse I mean: hiding the part of the content that does not not fit inside the cell.</p>
  
  <p>How can I do that?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;this can collapse&lt;/td&gt;
      &lt;td&gt;this can collapse&lt;/td&gt;
      &lt;td class="nocollapse"&gt;this should not collapse&lt;/td&gt;
      &lt;td&gt;this can collapse&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>table {
    width: 100%;
    max-width:100%;
  }
  td {
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
  }
  td.nocollapse {
    overflow: none;
  }
  </code></pre>