Html 打印不可破坏元素的样式存在问题

我有一个带有打印pdf样式的文件：

@media print {
  ::-webkit-scrollbar {
    display: none;
  }
  body {
    background-color: white !important;
    overflow-y: hidden !important;
  }
  .main.container {
    background-color: #ffffff !important;
    > .menu {
      display: none;
    }
    > .container {
      overflow-y: visible !important;
    }
    > .content {
      overflow: visible !important;
    }
  }
}

.unbreakable {
  display:inline;
  width: 100%;
  background-color: lightgreen;
}
.unbreakable:after {
  content: '';
  display:block;
  height:0;
  visibility: hidden;
}

.board-print {
  background-color: #FFFFFF !important;
  padding: 15px;
  overflow: visible !important;
  font-family: @font-family;
  .board-header {
    font-weight: normal;
  }
  .board-body {
    height: auto !important;
    background-color: #FFFFFF;
    width: 100%;
    .table-wrapper {
      background-color: lightcyan;
      width: 100%;
    }
    .widget-print {
      height: auto !important;
      margin-bottom: 30px !important;
    }
    .widget-header {
      font-family: @font-family;
      margin-bottom: 5px;
      font-weight: 300;
      font-size: 1.28rem;
      color: #4D4D4D;
    }
    .reactive-table {
      page-break-after: auto !important;
      overflow: visible !important;
      height: auto !important;
      table {
        th, td{
          font-weight: normal;
          font-family: @font-family;
        }
        .table-up-icon, .table-down-icon, .filter.padded.icon {
          display: none;
        }
      }
    }
    .note-widget .mce-container{
      border: none !important;
    }
    .ruler {
      display: none;
    }
    .chart {
      width: 95%;
      height: 450px;
    }
  }
}

.unbreakable我将其用于仅打印图表，效果很好，但当我添加用于打印表格的.table包装时，所有表格都已损坏。 这是我的玉：

template(name="widgetsShowPrint")
  .widget-print
    +if isConfigured
      +if isChart
        .unbreakable
          h3.widget-header #{title}
          +UI.dynamic template=type data=widgetData
      +else
        table.table-wrapper
          tbody
            tr
              td
                h3.widget-header #{title}
                +UI.dynamic template=type data=widgetData

在那里我有一个使用条件。不易碎或表包装。 我试着打印一个PDF，页面大小是A4，但不起作用。有人可以帮助我，我不是CSS专家。 我附上了一张带有结果的图像。

这应该可以：

@media print {
    .unbreakable {
        page-break-inside: avoid;
    }
}

检查浏览器兼容性

解决方案是：

template(name="widgetsShowPrint")
  .widget-print
    +if isConfigured
      table.table-wrapper
        tbody: tr: td(class="{{type}}-container")
          h3.widget-header #{title}
          +UI.dynamic template=type data=widgetData

我添加了一个类型td（class=“{type}}-container”） 在更少的文件中，我添加了任何td的大小：

.board-body {
    height: auto !important;
    background-color: #FFFFFF;
    width: 100%;
    .table-wrapper {
      width: 100%;
      td.chart-container {
        height: @mid-page-size;
      }
    }

我解决了我的问题