Печать страницы HTML - PullRequest
Новая
       11

Печать страницы HTML

0 голосов
/ 22 марта 2012

У меня очень длинная таблица на моей веб-странице. Когда я его печатаю, похоже, что последняя строка таблицы находится на одной странице (только в верхней части страницы). Остальная часть страницы пуста. На следующей странице у меня есть гнездо таблицы. Я не знаю, почему следующая таблица не находится внизу последней строки первой страницы.

В HTML выглядит следующим образом: 

<table align="left" cellspacing="0" cellpadding="0" border="1">
  <thead>
    <tr>....</tr>
  </thead>
  <tbody>
    <tr>...</tr>
  </tbody>
</table>

<table align="center" width="800" cellspacing="0" cellpadding="0" border="1" style="margin: 0 auto 0 auto; page-break-inside: avoid;">
  <tbody>
    <tr>
      <td align="left" width="200">xxx</td>
      <td align="right" width="200">xxx</td>
      <td align="right" width="200">xxx</td>
      <td align="right" width="200">x</td>
    </tr>
    <tr>
      <td align="left" width="200">
      <td align="right" width="200">
      <td align="right" width="200">
      <td align="right" width="200">
    </tr>
    <tr></tr>
</table>

CSS: 

background-color: white;
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0;
font-size: 10px;
vertical-align: middle;

Ответы [ 2 ]

1 голос
/ 03 апреля 2012

Попробуйте этот код и сделайте предварительный просмотр. Я получаю второй стол прямо под первым столом. 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Print of HTML Page</title>
        <style type="text/css">
            table{
                width: 800px;
                background-color: white;
                border: 1px solid #000000;
                border-collapse: collapse;
                border-spacing: 0;
                font-size: 10px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <table border="1">
          <thead>
            <tr>
                <th>Table 1 Header</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
                <td>Table 1 Footer</td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
                <td>Table 1 Row 1</td>
            </tr>
            <tr>
                <td>Table 1 Row 2</td>
            </tr>
            <tr>
                <td>Table 1 Row 3</td>
            </tr>
            <tr>
                <td>Table 1 Row 4</td>
            </tr>
            <tr>
                <td>Table 1 Row 5</td>
            </tr>
            <tr>
                <td>Table 1 Row 6</td>
            </tr>
            <tr>
                <td>Table 1 Row 7</td>
            </tr>
            <tr>
                <td>Table 1 Row 8</td>
            </tr>
            <tr>
                <td>Table 1 Row 9</td>
            </tr>
            <tr>
                <td>Table 1 Row 10</td>
            </tr>
            <tr>
                <td>Table 1 Row 11</td>
            </tr>
            <tr>
                <td>Table 1 Row 12</td>
            </tr>
            <tr>
                <td>Table 1 Row 13</td>
            </tr>
            <tr>
                <td>Table 1 Row 14</td>
            </tr>
            <tr>
                <td>Table 1 Row 15</td>
            </tr>
            <tr>
                <td>Table 1 Row 16</td>
            </tr>
            <tr>
                <td>Table 1 Row 17</td>
            </tr>
            <tr>
                <td>Table 1 Row 18</td>
            </tr>
            <tr>
                <td>Table 1 Row 19</td>
            </tr>
            <tr>
                <td>Table 1 Row 20</td>
            </tr>
            <tr>
                <td>Table 1 Row 21</td>
            </tr>
            <tr>
                <td>Table 1 Row 22</td>
            </tr>
            <tr>
                <td>Table 1 Row 23</td>
            </tr>
            <tr>
                <td>Table 1 Row 24</td>
            </tr>
            <tr>
                <td>Table 1 Row 25</td>
            </tr>
            <tr>
                <td>Table 1 Row 26</td>
            </tr>
            <tr>
                <td>Table 1 Row 27</td>
            </tr>
            <tr>
                <td>Table 1 Row 28</td>
            </tr>
            <tr>
                <td>Table 1 Row 29</td>
            </tr>
            <tr>
                <td>Table 1 Row 30</td>
            </tr>
            <tr>
                <td>Table 1 Row 31</td>
            </tr>
            <tr>
                <td>Table 1 Row 32</td>
            </tr>
            <tr>
                <td>Table 1 Row 33</td>
            </tr>
            <tr>
                <td>Table 1 Row 34</td>
            </tr>
            <tr>
                <td>Table 1 Row 35</td>
            </tr>
            <tr>
                <td>Table 1 Row 36</td>
            </tr>
            <tr>
                <td>Table 1 Row 37</td>
            </tr>
            <tr>
                <td>Table 1 Row 38</td>
            </tr>
            <tr>
                <td>Table 1 Row 39</td>
            </tr>
            <tr>
                <td>Table 1 Row 40</td>
            </tr>
            <tr>
                <td>Table 1 Row 41</td>
            </tr>
            <tr>
                <td>Table 1 Row 42</td>
            </tr>
            <tr>
                <td>Table 1 Row 43</td>
            </tr>
            <tr>
                <td>Table 1 Row 44</td>
            </tr>
            <tr>
                <td>Table 1 Row 45</td>
            </tr>
            <tr>
                <td>Table 1 Row 46</td>
            </tr>
            <tr>
                <td>Table 1 Row 47</td>
            </tr>
            <tr>
                <td>Table 1 Row 48</td>
            </tr>
            <tr>
                <td>Table 1 Row 49</td>
            </tr>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
          </tbody>
        </table>

        <table border="1" style="page-break-inside: avoid;">
          <tbody>
            <tr>
              <td>Table 2 Row 1 Cell 1</td>
              <td>Table 2 Row 1 Cell 2</td>
              <td>Table 2 Row 1 Cell 3</td>
              <td>Table 2 Row 1 Cell 4</td>
            </tr>
            <tr>
              <td>Table 2 Row 2 Cell 1</td>
              <td>Table 2 Row 2 Cell 2</td>
              <td>Table 2 Row 2 Cell 3</td>
              <td>Table 2 Row 2 Cell 4</td>
            </tr>

        </table>

    </body>
</html>
0 голосов
/ 03 апреля 2012

Вы можете управлять таблицей стилей, используемой для печати отдельно, используя 

@media print {
   ....
}

Поскольку ваша таблица разбивается внутри, вы можете отключить ее, используя 

@media print {
   table {
       page-break-inside: avoid;
   }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...