Problems with the styles print unbreakable elements - html

Question

I have this file with my styles for print a 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;
}
}
}
the .unbreakable I use it for print only charts and works fine but when I added .table-wrapper for print tables all is broken.
this is my jade:
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
there I have a conditional for uses .unbreakable or the table wrapper.
I tried to print a PDF the size of the page is A4 but it doesn't work. Someone could help me, I am not expert in CSS.
I attached a image with the result.

Answer 1

This should work :
#media print {
.unbreakable {
page-break-inside: avoid;
}
}
Check the browser compatibility

Answer 2

the solution was:
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
I added a type td(class="{{type}}-container")
and in less file I added the size for any td:
.board-body {
height: auto !important;
background-color: #FFFFFF;
width: 100%;
.table-wrapper {
width: 100%;
td.chart-container {
height: #mid-page-size;
}
}
and I solve my problem.