Таблицы стилей печати для страниц с длинными горизонтальными таблицами - PullRequest
8 голосов
/ 15 ноября 2008

У меня есть страница, которая выплевывает данные из БД в длинные горизонтальные таблицы.

Мне нужно красиво распечатать, чтобы он не обрезался. Любые советы?

Ответы [ 3 ]

7 голосов
/ 16 ноября 2008
  1. Изменить таблицу на горизонтальную с несколькими строками (поменять местами строки / столбцы)

  2. Предложите пользователям перейти в ландшафтный режим. AFAIK нет способа сделать это программно в текущих браузерах (CSS3 определяет @page {size:landscape})

  3. Разделить таблицу на несколько столбцов (то есть вместо одной таблицы со 100 столбцами создать 10 таблиц по 10 столбцов в каждой). Используйте CSS table {display: inline-table}, чтобы показать их все на экране. Этот трюк работает, только если у вас нет клеток с разной высотой.

5 голосов
/ 16 ноября 2008

Чтобы ваш стол не исчезал в Бездне Принтера, убедитесь, что его контейнер имеет ширину 100%.

Я предполагаю, что вы знаете, как использовать CSS для печати (<style type="text/css" media="print">).
Поскольку принтеры и компьютерные мониторы могут иметь очень разные разрешения, делать большую часть ваших настроек размера в em в печатном CSS, и скрывать ненужные элементы при печати (display:none).

Кроме того, чтобы улучшить читаемость на бумаге, используйте белый фон, черный текст, и шрифты с засечками (Times New Roman и т. д.), имеющие репутацию более разборчивых на бумаге.

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

5 голосов
/ 15 ноября 2008

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

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

...