title: Putting a scrollable div into table
body: <p>I have the following script:</p>
  
  <pre><code>&lt;table width="100%"&gt;
      &lt;tr&gt;
          &lt;td style="width: 300px;background-color: red"&gt;
          &lt;/td&gt;
          &lt;td style="background-color: lime"&gt;
              &lt;div style="width: 50%;overflow: auto;"&gt;
                  &lt;img src="very_big_image.jpg" /&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td style="width: 400px;background-color: orange"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>It sets the width of second <code>td</code> equal to the <code>width</code> of my <code>img</code>,(but logically the second <code>td</code> must have the width = <code>'100% - 300px - 400px'</code>) so I have the scroll in my whole window.</p>
  
  <p>How can I fix it?</p>