Printing break auto page not working properly

I'm trying to print a page that includes some tables and photos. On the HTML everything looks good yet when I go into print mode the table header cells go below the actual data of the table as shown inthe picture

I've tried using the break-after-page feature yet it simply does not work,i've tried giving the

this is the code :

<div className='text-3xl pt-32 break-after-page' >{t('quality_indices')}</div>
        <div className="relative border rounded-lg">
          <table className="w-full text-sm text-left text-gray-100 dark:text-gray-600 ">
            <thead className="text-xs text-gray-700 uppercase bg-gray-100  text-right ">
              <tr>
                <th scope="col" className="px-2 py-2 rounded-tr-lg">
                  {t('issue_examined')}
 
                </th>
                <th scope="col" className="px-2 py-2 border-r-2">
                  {t('requirement')}
               
                </th>
                <th scope="col" className="px-2 py-2 border-r-2">
                  {t('planninn')}
            
                </th>
                <th scope="col" className="px-2 py-2 border-r-2">
                  {t('test_and_match')}
            
                </th>
                <th scope="col" className="px-2 py-2 border-r-2">
                  {t('explanation')}

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