Putting a scrollable div into table

I have the following script:

<table width="100%">开发者_JAVA技巧
    <tr>
        <td style="width: 300px;background-color: red">
        </td>
        <td style="background-color: lime">
            <div style="width: 50%;overflow: auto;">
                <img src="very_big_image.jpg" />
            </div>
        </td>
        <td style="width: 400px;background-color: orange">
        </td>
    </tr>
</table>

It sets the width of second td equal to the width of my img,(but logically the second td must have the width = '100% - 300px - 400px') so I have the scroll in my whole window.

How can I fix it?

Setting the overflow to scroll should acheive what you're looking for:

overflow:scroll;

Example: http://jsfiddle.net/WbAEq/

Setting the overflow to auto as you have will only show scroll bars when you're using clipping.

UPDATE:

In order to get the table to work with overflow content you need to set the table-layout property of the <table> to fixed

table{
table-layout:fixed;
}

You can see an example of this here: http://jsfiddle.net/WbAEq/2/