Переполнение в ячейках таблицы

Question

Мне нужно создать макет чата, который использует все доступное пространство и хорошо масштабируется, но имеет несколько фиксированных размеров.

Вот структура:

<table style="width: 100%; height: 100%">
    <tr>
        <td></td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>

Однако я хочупоместите много содержимого в первую ячейку таблицы, и я хочу, чтобы она прокручивалась, чтобы таблица не расширялась.

Можно ли правильно переполнить ее, не имея фиксированной высоты для ячейки?Просто добавив переполнение: кажется, авто не работает.

PS.Я ненавижу таблицы, но не могу найти очень чистый и кроссбраузерный способ сделать такую ​​раскладку с помощью divs и css.Если кто-то может придумать, я с радостью воспользуюсь им.

Answer 1

Альтернативой, если ваш контент на самом деле даже не должен находиться в таблице, является использование системы сетки CSS, такой как 960.gs или Николь Салливан " OO-CSS ". .

Вы хотели бы разделить контейнер на любое количество сеток, в которых вы нуждались, и они намного лучше подходят для оформления CSS. Они гораздо более гибкие и простые в использовании.

Answer 2

Одним из способов достижения этого является использование помещения всего содержимого в элемент div и установки свойства переполнения div на auto

<table style="width: 100%; height: 100%">
    <tr>
        <td>
         <div style="overflow:auto;">
              //your contain 
          </div>
        </td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>