title: How to wrap table cell at a maximum width in full width table
body: <p>I'd like to have a table with headers down the left hand side, the headers should be as narrow as possible, and the space for the values should take up the rest of the width of the page. The headers should all be on a single line, unless the content of the header cell is very long, at which point the header should wrap onto multiple lines.</p>
  
  <p>With short content, this works:</p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;th&gt;Short Header&lt;/th&gt;
          &lt;td&gt;value&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Quite Long Header&lt;/th&gt;
          &lt;td&gt;value&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table {
      width: 100%;
  }
  
  th {
      text-align: right;
      width: 10px;
      white-space: nowrap;
  }
  </code></pre>
  
  <p>However, when I try to add a maximum width, instead of wrapping, the content spills out of the text box:</p>
  
  <pre><code>table {
      width: 100%;
  }
  
  th {
      text-align: right;
      width: 10px;
      white-space: nowrap;
      max-width: 300px;
      word-break: break-all;
  }
  </code></pre>
  
  <p>Demo: <a href="https://jsfiddle.net/2avm4a6n/">https://jsfiddle.net/2avm4a6n/</a></p>
  
  <p>It seems that the <code>white-space: nowrap;</code> style overrides the <code>word-break: break-all;</code>, so the <code>max-width: 300px;</code> causes the text to spill out. I'm using the <code>white-space: nowrap;</code> and <code>width: 10px;</code> combination to make the header column as narrow as possible, without wrapping headers with spaces in below the minimum width, but having just the <code>width: 10px;</code> and the <code>word-break: break-all;</code> causes the headers to wrap into single characters to fit in the narrow 10px.</p>
  
  <p>Any idea how to do this with css?</p>