Как я могу заставить таблицу (или часть таблицы) заполнить остальную часть контейнера по высоте

#javascript #html #tcpdf

#javascript #HTML #tcpdf

Вопрос:

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

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

Помощь полностью оценена.

я не добавляю код, потому что добавлять особо нечего, он просто передает HTML в функцию tcpdf.

Ответ №1:

Очень сложно увеличить нижнюю строку таблицы.

Альтернативные решения:

  • Оберните table в a div и установите его высоту 100% . Затем div он заполнит фон. Если вы сделаете таблицу непрозрачной, она будет выглядеть правильно, если вы не хотите что-то вроде «расширить границы столбцов до самого низа».

  • HTML не является хорошим форматом для создания постраничного вывода. В HTML нет реального понятия «размер страницы», трудно повлиять на то, где должен (или не должен) Происходить разрыв страницы и т. Д. Вместо того, чтобы пытаться управлять выводом удаленно, попробуйте напрямую управлять платформой TCPDF. Создайте объекты страницы PDF, нарисуйте контур таблицы на всю высоту, начните рендеринг ячеек, пока страница не заполнится, запустите новую страницу, промойте, повторите.

Комментарии:

1. Попытка первой идеи, поскольку в последней ячейке нет столбцов, только некоторая информация о продукте и доставке. Скоро будет обновлено.

2. Первый, похоже, не работает. Похоже, что TCPDF полностью игнорирует высоту div. даже в тестовом примере, печатающем только div высотой 200 пикселей с границей, он печатает только строку. '<div style="width: 100%; border-style:solid; border-width:2px; height: 200px;"></div> выводит прямую линию