Я использую редактируемый шаблон счета, чтобы сделать счет. Он отлично смотрится в браузере, но когда в таблице добавляется определенное количество элементов, нижняя часть (как показано на рисунке) становится подобной. Как это исправить? Я хочу, чтобы он автоматически печатался на вторую страницу, когда элемент много, и печатается на первой странице, когда он подходит.Избегайте разворачивания div/таблиц при печати
Спасибо!
Для таблиц вы должны использовать <thead>, <tbody> и <tfoot> Теги. Пока вы должны поэкспериментировать, если вам нужно <tfoot>. Остальные два весьма полезны. Заголовок вашей таблицы будет повторяться на каждой странице, которая заставит вашу таблицу выглядеть не так сильно. <tfoot> также скопирует то, что вы определяете как нижний колонтитул на каждой странице, что может быть нежелательно.
Для дивы вы должны экспериментировать с page-break-before или page-break-afterCSS команд. Хотя это не поможет вам, если у вас есть заполнение страницы, они могут помочь вам на более мелких.
Попробуйте добавить этот CSS стиль для дивы:
page-break-inside: avoid;
я уже отсортирован таблицу. для div я пробовал оба разрыва страницы после и до использования атрибута; всегда. он работает, но я предполагаю, что он не будет напечатан на одной странице, даже если элементы вписываются в 1 страницу. Я попытался «избежать», но это не сработало. Любая идея, как я могу указать функцию или коды, чтобы узнать, если номер элемента больше, чем «X», а затем перейти на вторую страницу? (Или наоборот), я уверен, что мне нужен javascript для этого, может быть? – Luqman
Это сложная проблема с печатью из css/html. В каждом браузере он может выглядеть по-другому, некоторые могут печатать один и тот же контент на 2 страницах, который является одним в другом браузере. Для этого вы можете взглянуть на [normalize.css] (http://necolas.github.com/normalize.css/). Лучшим решением в моей работе является создание pdf. Есть несколько конвертеров, которые могут конвертировать html в pdf. По вашему вопросу, да, вам нужен Javascript для подсчета записей. Вы также можете решить его с помощью css, но он может не работать в каждом браузере. –
ОТПРАВИТЬ ОТВЕТ НА ВАС. Я думаю, что получаю картину о том, как это сделать с помощью javascript. и normalize.css помогает мне немного очистить мой код. – Luqman