2013-12-18 4 views
0

Здравствуйте, я надеюсь, что кто-то может помочь мне с этой проблемой. В основном у меня возникла проблема со страничным перерывом, позвольте мне разбить каждый маленький шаг, который я сделал:Page-Break не работает должным образом

# 1 Первоначально у меня была проблема с разрывом страницы, используя window.print(), из-за того, что я был используя тег таблицы.

 @media print { 

    @page :first{ 
    margin-top:1cm; 
    } 

    @page { 
    margin-top:3cm; 
    } 
} 

h1, h2, h3, h4, div, table, tr, td, th{ 
    font-family:Arial, Helvetica, sans-serif; 
    border-collapse:collapse; 
    width:auto; 
    margin:11px; 
} 


.cuerpo{ 
    position:relative; 
    top:200px; 
    right:9px; 
    font-size:9px; 
} 


.cuerpo{ 
    padding-top:150px; 
    font-size:9px; 
    font-weight:500; 
    page-break-after:always; 
} 


.cuerpo tr { 
    padding:3px; 
    line-height:15px; 
    height:10px; 
    width:15px; 
} 

.cuerpo tbody td, .cuerpo thead th{ 
    border:1px solid #000000; 
    padding:1px; 
} 

http://jsfiddle.net/the_best/u99BQ/


# 2 Тогда я нашел в форуме, что страница разбития работает с 'дисплей: блок;' вместо этого и изменил размер шрифта: 13 пикселей, поэтому он не выглядит слишком большим и может поместиться также на бумаге. Я добавил, что конкретная строка кода в css это то, что произошло: , если вы попробуете font-size = 100% сломается правильно, но это будет выглядеть слишком большим.

@media print { 

    @page :first{ 
    margin-top:1cm; 
    } 

    @page { 
    margin-top:3cm; 
    } 
} 

h1, h2, h3, h4, div, table, tr, td, th{ 
    font-family:Arial, Helvetica, sans-serif; 
    border-collapse:collapse; 
} 


thead tr .ancho { 
    width:95; 
    width:80; 
} 

#nombre-hotel { 
    text-align:center; 
} 


#cuerpo{ 
    page-break-inside:avoid; 
    padding-top:150px; 
    position:relative; 
    top:50px; 
    border-collapse:collapse; 
    font-size:90%; 
} 

#cuerpo tr{ 
    page-break-inside:avoid; 
    page-break-after:auto; 
    /*page-break-after:auto;*/ 
    display:block; 
    /*padding:3px; 
    line-height:15px; 
    height:10px; 
    width:15px;*/ 
} 

#cuerpo td, #cuerpo th{ 
    page-break-inside:avoid; 
    border:solid 1px #CCCCCC; 
} 

http://jsfiddle.net/the_best/VwTa7/

В основном речь идет, чтобы получить страницу прорывы прямо с соответствующим размером шрифта, а также и выровнять клетки. К сожалению, это не для меня. Если кто-то может мне помочь, я буду очень признателен. Если вам нужна подробная информация, просто дайте мне знать.

ответ

0

если вы дадите .th-отель min-width и используйте размер шрифта: 13px; Разрыв страницы работает Я думаю, что проблема была мультииндексы линий в колонке отеля

http://jsfiddle.net/VwTa7/1/

#cuerpo{ 
     page-break-inside:auto; 
     font-size: 13px; 
    } 

    #cuerpo tr{ 
     page-break-inside:avoid; 
     page-break-after:auto; 
    } 

    .th-hotel { 
     min-width: 250px; 
    } 
+0

Не работает на скрипке, которую вы опубликовали. Я думаю, вы упускаете из виду тот факт, что если вы не добавите «display: block;» на #cuerpo tr он не будет разбиваться на страницы. Поскольку, насколько я узнал, свойство разбиения на страницы работает только на элементах блока, поэтому я пытаюсь получить чистый результат с помощью дисплея: если возможно, блок. Если есть другой способ, я буду знать. – user2989570

0

О никогда не возражаете, я просто понял, что это лучше использовать DOMPDF доставить ваш документ в формате PDF , Формат PDF заботится о правильном разрыве страницы, независимо от того, используете ли вы стол или что-то еще. Он просто отлично работает, просто нужно нажать кнопку печати, и это будет хорошо. Спасибо за ваш комментарий в любом случае.

Смежные вопросы