Dinamic table with inside div causes Cumulative Layout Shift. Why?

Question

This is the part of my code:

<div class="main_100%">
   <h1 class="main-header">Header</h1>
   <div class="sub_50%" style="padding:15px"><strong>Sample:</strong> some text.</div>
   <table style="border:none;padding:15px">
      <tbody>
         <tr>
            <td style="vertical-align:top;width:60%;padding-right:25px;padding-bottom:15px">something</td>
            <td style="vertical-align:top;width:40%;padding-bottom:15px">something</td>
         </tr>
         <tr>
            <td style="vertical-align:top;width:60%;padding-right:25px;padding-bottom:15px">something</td>
            <td style="vertical-align:top;width:40%;padding-bottom:15px">something</td>
         </tr>
         <tr>
            <td style="vertical-align:top;width:60%;padding-right:25px">something</td>
            <td style="vertical-align:top;width:40%">something</td>
         </tr>
      </tbody>
   </table>
</div>

Google PageSpeed and GTMetrix said that there is a large CLS. I realized that if I set the table to a fixed size (for example 500px), the problem disappears. But if I set it to a fixed width, it won't be responsive in all resolutions.

If I add style="overflow:auto" to the div, then the CLS decreases slightly, but it still remains. I don't know what to do, please, help me.

Thank you very much!