Медиа печать нескольких страниц table-border-layout - PullRequest
Новая
       10

Медиа печать нескольких страниц table-border-layout

7 голосов
/ 12 сентября 2011

Когда я печатаю это, слева и вверху таблицы на второй странице отсутствует граница. Как я могу это исправить? 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        @media print
        {
            body { 
                margin: 0; 
                padding: 0;
                color: #000000 !important;
                background-color: #ffffff !important;
            }
            * {
                color: inherit !important; 
                background-color: transparent !important;
                background-image: none !important;
            }
            table {
                width: 100%;
                border: 1pt solid #000000;
                border-collapse: collapse;
                font-size: 11pt;
            }
            #space { height: 750px; }
        }
    </style>
</head>
<body>
    <br /><br />
    <h2>.</h2>
    <div id="space"></div>
    <table border="1">
        <thead>
            <tr><th>Amount</th><th>label</th></tr>
        </thead>
        <tbody>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
        </tbody>
    </table>
</body>
</html>

Ответы [ 2 ]

5 голосов
/ 14 сентября 2011

Измените свой стиль таблицы, чтобы что-то выглядело хорошо: 

   table {
    border: 1pt solid #000000;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11pt;
    width: 100%;
   }

Редактировать: Чтобы что-то выглядело идеально, сначала удалите все границы таблицы, затем определите каждый стиль с тем, что вы хотите, чтобы иметь только одну строку за границей (создайте границу для th, td, tr): 

  table {
       border-collapse: separate;
        border :  0px solid #000000;
    border-spacing: 0;
    font-size: 11pt;
    width: 100%;
    border-color:  #000000 ;
    border-right: 1px solid;

}
tr {
    border-color:  #000000 ;
    border-style: none ;
    border-width: 0 ;
}
td {
    border-color:  #000000 ;
    border-left: 1px solid;
    border-bottom:1px solid ;
}

th {
    border-color:  #000000 ;
    border-left: 1px solid;
    border-top:1px solid ;
    border-bottom:1px solid ;
}
0 голосов
/ 09 декабря 2013

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

<table style="border:1px solid black; margin:1px;">
    <thead>
       <tr><th>Amount</th><th>label</th></tr>
    </thead>
    ....
...