Действительно ли невозможно вместить большую таблицу HTML в небольшое пространство?

Вы можете разбить текст на несколько строк, и он все равно будет выглядеть как одна при вырезании или копировании. Используйте тег wbr ( w or br eak) .

Вы можете реализовать сетку «рыбий глаз», как то, что я сделал с помощью C # и WinForms:

alt text http://img523.imageshack.us/img523/9827/fisheye2b.jpg

Этот элемент управления предназначен для отображения таблицы с 1000 столбцами и 1000 строками. Однако я не уверен, что это было бы возможно с прямым HTML и JavaScript. Если вы хотите перейти на ActiveX, я могу вам помочь.

Это может быть другая идея: попробуйте использовать плагин BySlideMenu для Mootools.

Он предназначен для меню, но может быть использован для вашего стола. Взгляните на пример №4 и следующие.

Если бы я был на вашем месте, я бы подумал о рендеринге таблицы в iframe. Таким образом, вы можете легко получить полную таблицу нужного вам размера, и пользователю придется прокручивать, чтобы увидеть эти столбцы. Можно прикрепить событие keyPress к iframe и привязать эти нажатия клавиш для прокрутки, если вы думаете, что это упростит работу для пользователей.

Второй вариант, который я могу придумать, - это сделать все ячейки немного уже, чтобы там было немного свободного места на краю экрана. Добавьте класс к каждому элементу таблицы, указав, в какой строке он находится (это упрощает ссылки на них вместе). Прикрепите событие щелчка к таблице и используйте event.target, чтобы щелкнуть ячейку (это потребляет меньше памяти браузера, чем прикрепление события к каждой ячейке). Это событие щелчка затем расширит ширину этого столбца, чтобы отобразить все данные, и добавит метку класса в соответствующую ячейку в первой строке. Затем при следующем щелчке по ячейке в этом столбце таблица может проверить в первой строке, развернута ли она, и решить, должна ли она сжиматься до исходного состояния или расширяться. В такой большой таблице пользователей, вероятно, интересуют только корреляции между несколькими столбцами одновременно, этот метод имеет то преимущество, что только те столбцы, которые им интересны, расширяются в любой момент времени.

Третий и последний вариант, который я могу думать о том, чтобы использовать скромный div. Прикрепите элемент щелчка, как в последнем абзаце, но на этот раз пусть обработчик событий создает div над интересующей ячейкой, которая достаточно велика, чтобы содержать весь текст, а затем заставляет его исчезать, если этот div щелкают.

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

Удачи! ;)

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

Вы также можете использовать jqgrid. subgrid

Вы можете просто открыть диалоговое окно jquery ui для события onclick строки и разместить там некоторые из ваших данных.

Я сделаю таблицу с представлением «рыбий глаз», как док Mac.

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

Это дает хороший эффект навигации .. вы можете увидеть пример здесь

_{(источник: ndesign-studio.com )}

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

table { 
table-layout:fixed; 
width:100%; 
overflow:scroll; 
border:1px solid #f00; 
word-wrap:none; 
} 

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

<div style="width:100%;overflow:scroll;">
<table>...</table>
</div>

jqGrid может быть решением (в разделе Advanced-> Resizing). Я не большой поклонник таблиц данных, но, по крайней мере, он позволяет изменять размер, однако я не пробовал это с таблицей фиксированной ширины.

Ну, еще одно возможное решение: поменяйте местами строки и столбцы, поместив заголовки столбцов слева, а не сверху. Вам нужно будет прокручивать строки по горизонтали (но, эй, полосы прокрутки полезны), но каждая ячейка может использовать всю ширину экрана за вычетом ширины заголовка.

Таким образом, переключите оси X и Y таблицы. Не очень красиво, но может сработать.

Попытайтесь реализовать управление всплывающей подсказкой для тех столбцов, которые содержат большой объем текста. Например, покажите только первые 100 символов, затем вставьте какой-нибудь красивый значок в конце строки, который появится, а также красивую всплывающую подсказку, которая содержит полный текст для этого столбца. Есть хорошие подсказки jQuery, которые сделают вашу работу. Эта реализация не испортит внешний вид вашей страницы, и она довольно гибкая с точки зрения того, сколько текста вы будете показывать во всплывающей подсказке.

Вы можете использовать горизонтальный аккордеон в таблице, если нужно расширять только один столбец в строке за раз. Или вы можете сделать что-то вроде этого ответа (или даже этого ). В демонстрации щелкните заголовок таблицы, чтобы увидеть результат.

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

Я могу представить себе ситуации, в которых этот будет работать, но он сильно зависит от данные.

Я бы разделил и зебру согласно предложению Джона вместе с вашим собственным, обрезая и отображая .... Когда пользователь наводит курсор на разрез столбца, вы можете показать прямоугольник во всю ширину откусил полное содержание. Щелчок, когда отображается поле, не позволяет ему исчезнуть при перемещении мыши в другой столбец, чтобы пользователи могли копировать / вставлять и т. Д.