Установите таблицу html в формате A4

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

Я попытался использовать этот атрибут @page, но ничего не изменил,

<style type="text/css">
    @page {    size: 21cm 29.7cm; margin: 30mm 45mm 30mm 45mm; }
</style>

Есть ли какая-либо сторонняя библиотека js, которая автоматически делает это? (Размер таблицы неизвестен раньше, пользователь загружает данные и генерирует таблицу, поэтому количество столбцов не фиксировано). {Моя конечная цель - напечатать это как PDF, но я не мог этого достичь, используя qprinter, указанный в QT}

Я разместил html файл с длинной таблицей здесь ссылка.

Заранее спасибо

Ответ 1

Таблица не могла разбить свои столбцы в новой строке, все, что вы можете сделать, это сделать ширину таблицы в соответствии с шириной бумаги.

Ширина страницы A4 в пикселях составляет 2480 пикселей x 3508 пикселей.

поэтому вы создадите максимальную ширину таблицы до 2480px, чтобы она не превышала размер бумаги.

Угадайте свою таблицу id = "table", тогда ваш стиль должен быть.

<style>
  #table{
    max-width: 2480px;
    width:100%;
  }
  #table td{
    width: auto;
    overflow: hidden;
    word-wrap: break-word;
  }
</style>

Ответ 2

Это похоже на то, что вы хотите, если это нужно, чтобы печатать страницы бок о бок и читать всю таблицу, как она есть на экране. Он работал с html, который вы указали в своей ссылке, добавьте это в таблицу стилей (я тестировал только в Chrome)

  @media print{  
   @page {size:landscape;}
   html{
    -ms-transform: rotate(90deg);/* IE 9 */
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
   }

   table,h1,h2 {position:relative;left:4.5cm}
  }

Ключ поворачивает содержимое для печати, поэтому он переполняется "вниз" на следующую страницу, а затем задает размер для пейзажа, чтобы повернуть бумагу, поэтому вы попадаете на страницы, ориентированные налево и вправо. К сожалению, я не мог заставить страницу разбиваться между столбцами. Но если вы отправляете все печатные страницы на стену бок о бок, это будет читаемо. Предварительный просмотр печати отобразит все страницы, повернутые на 90 градусов, что вы хотите, затем выберите A4 в качестве формата бумаги в диалоговом окне печати. Мне пришлось переставить таблицу и заголовки, потому что она висела слева от первой страницы, может быть, из-за всех вложенных div со встроенными стилями? Я не знаю, как я сказал, что это сработало с вашим html.

Вот распечатанный файл в формате pdf (я повторил вашу первую строку еще пару раз в этом примере) https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=0

Ответ 3

Вы должны попытаться использовать divs, а не таблицы, если хотите получить хорошие печатные листы. С <div> мы лучше контролируем способ отображения. <div> может быть легко оформлен в отличие от <table>, <tr>, <td> и т.д.

Вот что я сделал:

CSS

@media print {
    @page {
      margin: 0;
    }
    body {
        height: 100%;
        width: 100%;
    }
    div.divTableRow > div {
      display: inline-block;  
      border: solid 1px #ccc;
      margin: 0.1cm;
      font-size: 1rem;
    }
    div.divTableRow {
      display: block;
      margin: solid 2px black;
      margin: 0.2cm 1cm;
      font-size: 0;
      white-space: nowrap;
    }
    .divTable {
        transform: translate(8.5in, -100%) rotate(90deg);
        transform-origin: bottom left;
        display: block;
    }
}


.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
  width:100px; // set to a fixed value so as to get the table in the ordered manner.
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
}

Вы можете настроить то же самое, что и необходимо.

Fiddle: div-table-printable

Вы можете преобразовать свой html с <table> в <div> с помощью table-to-divs

Другие ссылки:

printing-html-table

CSS2PDF