Prevent divs from being cut in half while printing

Question

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>