Отображение / форматирование табличных данных (веб)

Question

В моем примере у меня есть таблица, где каждая строка, например, пользователь. Столбцы могут включать их имя, адрес, адрес электронной почты и т. Д. Теперь мне нужно добавить столбец (гипотетический пример) имен их кошек. В то время как у большинства людей не будет кошек, а у некоторых будет 1-2 кошки, случайный человек с 20 кошками образует один очень длинный ряд в таблице. Это дает мне проблему в презентации и для фильтрации / поиска имен кошек. Есть ли хорошее решение для отображения данных такого типа?

Answer 1

Сделайте так, чтобы первые 50 (или любые другие) символы поля отображались как обычно, а затем поместите остальные в блок с его видимостью, скрытой через CSS. Включите ссылку / кнопку / значок, который позволит пользователю переключать видимость, чтобы он мог видеть все значение.

Answer 2

Возможно, вы захотите попробовать сделать что-то вроде того, что делает SO. А именно, когда кто-то достигает определенной точки в своем Rep, он ставит суффикс числа и оценивает его. Ex. 10 КБ вместо 10 236

Таким образом, цифры не выходят из-под контроля.

Answer 3

Несколько вариантов:

1. Установить максимальную ширину ячейки и разрешить перенос данных
2. Поместите содержимое внутри тега-обертки (такого как div) и установите div с фиксированной шириной / высотой и стилем переполнения: скрытый, чтобы особо длинное слово не вытесняло ширину ячейки.
3. Усекать выводимый текст на стороне сервера

Для случаев № 2 и № 3 установите атрибут Title тега TD, чтобы он содержал полный неусеченный текст. Это будет представлять собой всплывающую подсказку при наведении на ячейку.

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