Положить прокручиваемый div в таблицу

Question

У меня есть следующий скрипт:

<table width="100%">
    <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>

Устанавливает ширину секунды td, равную width моего img, (но логически вторая td должна иметь ширину = '100% - 300px - 400px'), поэтому у меня есть свиток во всем моем окне .

Как я могу это исправить?

Answer 1

Настройка переполнения для прокрутки должна достичь того, что вы ищете:

overflow:scroll;

Пример: http://jsfiddle.net/WbAEq/

Если вы установите автоматическое переполнение как имеющееся, полосы прокрутки будут отображаться только при использовании отсечения.

UPDATE:

Чтобы таблица работала с содержимым переполнения, необходимо установить для свойства table-layout <table> значение fixed

.

table{
table-layout:fixed;
}

Вы можете увидеть пример этого здесь: http://jsfiddle.net/WbAEq/2/