Данные таблицы, вызывающие горизонтальную прокрутку

Question

У меня есть таблица на веб-странице, скажем, с 8 столбцами, и до недавнего времени она работала просто отлично ...

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

Я также должен подчеркнуть, что до этой проблемы ширина таблицы составляла 100% (за вычетом «поля»), и она работала просто отлично).

Есть ли умный способ ввести разрыв строки на '.' или '@'? В качестве альтернативы, как люди обычно обходят это? Интересные решения этой надоедливой проблемы приветствуются!

Answer 1

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

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

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

Answer 2

Используйте свойство table-layout css.

table-layout: fixed;

http://www.quirksmode.org/css/tables.html#tablelayout

Answer 3

Вы можете установить max-width для столбца и overflow:scroll или даже overflow:hidden.