Создать масштабируемую таблицу с ячейкой с переполнением: auto

Question

У меня есть таблица, отображающая табличные данные в масштабируемом макете. Сама таблица имеет ширину: 100%.

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

Мое решение состояло в том, чтобы поместить содержимое этой ячейки в div и присвоить div max-width:320px и переполнение: auto. Эта работа в IE9 и FF7, двух браузерах, которые меня беспокоят.

<table style="width:100%;">
  <tr>
    <td>
      <div style="max-width:320px; overflow:auto;">
        ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
      </div>
    </td>
  </tr>
</table>

Однако я предпочитаю не ограничивать содержимое столбца максимальной шириной 320 пикселей. Я бы предпочел, чтобы div растягивался по мере необходимости с таблицей и переполнялся, только когда таблица больше не помещается на экране. Возможно ли это?

Answer 1

То, что я сделал для этого, - это установил для переполнения значение «скрытый» и поместил всю строку в альтернативный текст, чтобы вы могли видеть ее при наведении курсора. Я не знаю, для этого ли вы собираетесь, но это то, что я иногда использую.

Если нет, попробуйте использовать эффекты скрытия jquery ui, это хороший способ сделать это. Надеюсь, это поможет

Answer 2

Почему бы не дать div максимальную ширину 100% и разместить его вокруг всего стола?

http://jsfiddle.net/wJUyL/

<div style="max-width:100%; overflow:auto;">
    <table style="width:100%;">
      <tr>
        <td>
ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
        </td>
      </tr>
    </table>
</div>