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

Question

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

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

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

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

Я разместил html-файл с длинным столом здесь - link.

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

Answer 1

Это, кажется, что вы хотите, если это поместить распечатанные страницы бок о бок и прочитать всю таблицу, как на экране. Он работал с 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

Answer 2

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

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> 

Answer 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