Safari是否真的支持page-break-inside:避免?

时间:2019-07-19 19:56:03

标签: html safari page-break-inside

MDN表示Safari浏览器支持page-break-inside:请避免,但是当我在表上使用它时,它将无法正常工作。我不能仅将表更改为显示:inline-block,因为我需要它表现为表。我尝试创建此超级基本的html页面以在safari 10上进行测试,并确认当我打印预览时,表格在多个页面(甚至是中间行)都被破坏了。在chrome中,一切正常。我是否需要设置规范中未概述的任何特殊的safari字段或标签,还是只是接受page-break- *在safari中不能很好地工作?

table {
  position: relative;
  border-collapse: collapse;
  page-break-inside: avoid;
  border-bottom: solid 2px red;
  width: 100%;
}

td {
  border: solid 1px black;
  padding: 50px;
  page-break-inside: avoid;
}
  <div>On first page</div>

  <div style="page-break-before: always">On second page</div>

  <table>
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test table column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Test table column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Test table column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Test table column 1</td>
        <td>Column 2</td>
      </tr>
    </tbody>
  </table>
  <table>
    <thead>
      <tr>
        <th>Table 2 Col 1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
    </tbody>
  </table>
  <table>
    <thead>
      <tr>
        <th>Table 3 Col 1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
    </tbody>
  </table>
  <table>
    <thead>
      <tr>
        <th>Long table header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>
      <tr>
        <td>Test table column</td>
      </tr>

    </tbody>
  </table>

0 个答案:

没有答案