Prevent divs from being cut in half while printing

I’m trying to prevent pages from breaking while printing the contents of a div.

Important to say that i’m using tailwind.

I have tried using:
break-after-page,
break-after-auto ,
break-before-page,
break-before-auto
break-page-inside avoid

on the table,thead and on the div where i’m using grid.

yet it doesnt help the issue i’m facing pictured

this is my code :

<div className=”pt-10 text-3xl”>{t(‘quality_indices’)}</div>
<div className=”relative rounded-lg border”>
<table className=”w-full text-left text-sm text-gray-100 dark:text-gray-600″>
<thead className=”table-row-group bg-gray-100 text-right text-xs uppercase text-gray-700″>
<tr className=”p-14″>
<th scope=”col” className=” rounded-tr-lg px-2 py-2″>
{t(‘issue_examined’)}

</th>
<th scope=”col” className=”border-r-2 px-2 py-2″>
{t(‘requirement’)}

</th>
<th scope=”col” className=”border-r-2 px-2 py-2″>
{t(‘planning’)}

</th>
<th scope=”col” className=”border-r-2 px-2 py-2″>
{t(‘test’)}

</th>
<th scope=”col” className=”border-r-2 px-2 py-2″>
{t(‘explanation’)}

</th>
<th scope=”col” className=”border-r-2 px-2 py-2″>
{t(‘notes’)}

</th>
<th scope=”col” className=”rounded-tl-lg border-r-2 px-2 py-2″>
{t(‘deviations’)}
{/* סטיות */}
</th>
</tr>
</thead>
<tbody>
{data.qualityIndices.map(element => (
<>
<tr className=” border-b border-t bg-white text-right text-black “>
<th
scope=”row”
className=”whitespace-nowrap px-4 py-1 font-medium”
>
{element.issueExamined}
</th>
<td className=”border-r-2 px-4 py-3″>
{element.requirementCharachterization}
</td>
<td className=”border-r-2 px-4 py-3″>
{element.planningAndExecution}
</td>
<td className=”border-r-2 px-4 py-3″>
{element.matchTests}
</td>
<td className=”border-r-2 px-4 py-3″>
{element.explanation}
</td>
<td className=”border-r-2 px-4 py-3″>
{element.explanation}
</td>
<td className=”border-r-2 px-4 py-3″>
{element.deviations}
</td>
</tr>
<tr>
<td colspan=”10″ className=”text-black”>
<div className=”grid grid-cols-3 gap-2 pt-3″>
{element.picturesAndNotes.map((picture, index) => (
<div className=” rounded-3xl border bg-white px-2 pt-2 pb-3 text-right”>
<p className=”text-lg”>
{‘ ‘}
<span className=”text-orange”>#{index + 1}</span>:{‘ ‘}
<span className=”font-bold text-black”>
{picture.uploader}
</span>
</p>
<p>
{picture.hour} – {picture.date}
</p>
<div>
<img
className=”h-[15vh] w-screen object-fill pt-10 lg:h-[20vh]”
src={picture.url}
/>
</div>
<p>{picture.title}</p>
</div>
))}
</div>
</td>
</tr>
</>
))}
</tbody>
</table>
</div>