Question

我正在为我的雇主做一个项目，并试图在多个页面上打印大型数据表以进行打印。

但是，当我尝试打印表格时，顶部边框似乎重叠在上一页上。

图片预览：

My Border Issue

我尝试将边框编辑为不同的粗细，并应用CSS属性现在允许将a分成多个页面，但是这些都没有任何作用。

现在，除了Bootstrap和分页规则之外，我已经从页面中删除了所有CSS，但是仍然存在相同的问题

我的代码：

table {
  page-break-inside: auto
}

tr {
  page-break-inside: avoid;
  page-break-after: auto
}

thead {
  display: table-header-group
}

tfoot {
  display: table-footer-group
}

<table id="test" class="table table-bordered thead-light">
  <thead>
    <tr>
      <th scope="col">Date / Time</th>
      <th scope="col">Log Class</th>
      <th scope="col">Reason</th>
      <th scope="col">Detail</th>
      <th scope="col">Hold State</th>
      <th scope="col">UL ID</th>
      <th scope="col">SKU</th>
      <th scope="col">Location</th>
      <th scope="col">Destination</th>
      <th scope="col">Qty</th>
      <th scope="col">User</th>
    </tr>
  </thead>
  <tbody>
    Table Data
  </tbody>
</table>

我希望边框会保留在开始的页面上，而不是剪切到上一页，但是正如您在原始图像中看到的那样，它仍然在剪切。

我们将不胜感激。

Answer 1

我无法理解您的真正问题，但我认为您正在尝试给th，td赋予不同的边界，然后向所需的边界添加不同的类并添加边界CSS。

示例：

.border-style {
  border:2px solid red !important;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td >Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td class="border-style">Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Answer 2

我遇到了您的问题，但不确定为什么要尝试检查该问题并进行CSS显示：无；边界上有什么

无法找到问题，因为我无法对此进行检查

对不起

并检查是否在任何地方添加了显示：内联块，我最近对此有疑问

Answer 3

我遇到了这个确切的问题，不幸的是我没有找到合适的解决方案 - 但请继续阅读！

问题似乎是表格标题的顶部边框“泄漏”到上一页。经过一些试验，我发现了两个解决方法（除了完全删除项目之外）。

“解决方案”#1 - 删除样式 :'(

移除顶行的所有边框和背景（包括表格边框）意味着泄漏像素不可见。万岁！

@media print {
    table, thead tr, thead th {

        /* You might not need '!important' with your styling, but
           I found with bootstrap that this is the safest option. */

        background: none !important;
        border: none !important;
    }
}

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Awww...</th>
            <th>These</th>
            <th>are</th>
            <th>boring</th>
            <th>headers!</th>
        </tr>
    </thead>
</table>

虽然这解决了我的问题，但它让我心碎。这不是我需要的解决方案...

“解决方案”#2 - 破解它，直到它崩溃！

经过一番大哭之后，我发现我可以在我的标题上方添加另一个虚拟行并删除它的样式！

“多么糟糕的解决方案 - 谢谢马克！”

th {
    border: solid 1px hotpink;
}

@media not print {
    .print-only {
        display: none;
    }
}

<table class="table table-bordered">
    <thead>
        <!-- This is where the magic is. This row 'pads' the table 
             headers and keeps them on the same page -->
        <tr class="print-only">
            <th style="border: none !important; background: none !important;"></th>
        </tr>
        
        <tr>
            <th>Look</th>
            <th>at</th>
            <th>these</th>
            <th>stylish</th>
            <th>headers!</th>
        </tr>
    </thead>
</table>

所以是的...当你们中的一个编码天才（genii？）遇到这个答案并意识到我们其他人都在狗屎小溪下时，请随时发布解决这个头痛的真正解决方案:)

在多页上打印表格

3 个答案:

“解决方案”#1 - 删除样式 :'(

“解决方案”#2 - 破解它，直到它崩溃！