title: Max width for table with auto layout
body: <p>I have a table with multiple columns and this table should not exceed a certain width <em>y</em>.</p>
  
  <p>The columns of this table are automatically sized by the table-layout: auto.</p>
  
  <p>But sometimes the columns get too big (the text should not be wrapped, it should be clipped) and sum up to a width bigger than <em>y</em>.</p>
  
  <p>In this case i want the 'biggest' columns to become smaller until the widths of the columns don't exceed <em>y</em> anymore.</p>
  
  <p>This means that i do not want to shrink alls columns by some factor but rather make the bigger columns "as small as neccessary".</p>
  
  <p>Is this possible through some simple JS or even CSS?</p>
  
  <p><strong>Here an example:</strong></p>
  
  <p>I have 3 columns and a max total width y of 1000px.<br />
  Here the sizes of the content of the columns:</p>
  
  <p>1: 100px 2: 1100px 3: 1300px</p>
  
  <p>This should result in a table with those widths:</p>
  
  <p>1: 100px 2: 450px 3: 450px;</p>
  
  <p>Here some code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;SomeText&lt;/td&gt;
              &lt;td&gt;SomeOtherTextSomeOtherTextSomeOtherText&lt;/td&gt;
              &lt;td&gt;SomeLongerTextSomeLongerTextSomeLongerTextSomeLongerTextSomeLongerText&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
      border: 1px solid red; 
      width: 500px;
  }
  
  table {
      table-layout: auto;
      border: 1px solid grey;
  }
  
  td {
      border: 1px solid black;
  }
  </code></pre>
  
  <p>fiddle: <a href="http://jsfiddle.net/6zJR4/2/" rel="nofollow noreferrer">http://jsfiddle.net/6zJR4/2/</a></p>
  
  <p>In this example the table is bigger than the containing div.
  What i would want is that the table respects the width of the containing div and the columns shrink. But not all columns should shrink with the same factor e.g. 30% smaller. But the bigger columns (maybe all columns would need to shrink in the end) shrink.</p>
  
  <p>My approach:
  I want to let the browser calculate the 'ideal' sizes of the columns and then adjust the sizes by hand (=JS) to match the maximum width of the containing div.</p>
  
  <p>How i am going to calculate the width of the different columns is not yet clear to me, i opened a mathoverflow question for that:
  <a href="https://math.stackexchange.com/questions/702067/how-to-find-a-set-of-ascending-natural-numbers-which-when-added-to-another-set-o">https://math.stackexchange.com/questions/702067/how-to-find-a-set-of-ascending-natural-numbers-which-when-added-to-another-set-o</a></p>
  
  <p>i hope there is a simpler solution.</p>