Issue Summary

Tables generated by macros and containing two <thead> HTML tags shows unexpected boundaries for the second <thead> elements post upgrade from Confluence 7.19 to 8.5. Since the respective styling is around button's, so these are further clickable based on which sorting is being done for the table body.  

This is reproducible on Data Center: Yes

Steps to Reproduce

1. Use this storage format and then check the behaviour under Confluence 7.19 and 8.5.

2. <table class="relative-table wrapped" style="width: 1502.0px;">
     <colgroup> <col style="width: 118.0px;"/> <col style="width: 145.0px;"/> <col style="width: 622.0px;"/> <col style="width: 617.0px;"/> </colgroup>
     <thead>
       <tr>
         <th style="text-align: left;">
           <p>COL</p>
         </th>
         <th style="text-align: left;">
           <p>COL1</p>
         </th>
         <th style="text-align: left;">
           <p>COL2</p>
         </th>
       </tr>
     </thead>
     <thead>
       <tr>
         <td style="text-align: center;">
           <p>
             <strong>ABC</strong>
           </p>
           <p>
             <br/>
           </p>
         </td>
         <td style="text-align: left;">
           <p>DEF</p>
         </td>
         <td style="text-align: left;">
           <div class="content-wrapper">
             <p>
               <strong>GHI</strong>
             </p>
           </div>
         </td>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td style="text-align: center;">
           <strong>ABC1</strong>
         </td>
         <td style="text-align: left;">DEF1</td>
         <td style="text-align: left;">
           <div class="content-wrapper">
             <p>
               <strong>GHI1</strong>
             </p>
           </div>
         </td>
       </tr>
     </tbody>
   </table>
   

Expected Results

First row under table heading should not have any boundary and grey background.

Actual Results

First row under table heading contains a boundary and grey background(Refer screenshot)

Workaround

Add custom CSS around button.headerButton and see if that works for you. You can plan to override this under a specific space or globally based on your requirement.

button.headerButton {
    appearance: auto;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: white;
    margin: 0em;
    padding-block: 1px;
    padding-inline: 6px;
    border-width: 2px;
    border: none;
}

To edit a space's CSS style sheets:

1. Go to the space and choose Space tools > Look and Feel from the bottom of the sidebar.
2. Choose Stylesheet then Edit.
3. Paste the custom CSS into the text field.
4. Save the changes and then try reloading the page.

OR

To edit the global CSS stylesheet:

1. Choose   > General Configuration > Stylesheet. 
2. Choose Edit.
3. Paste the custom CSS into the text field.
4. Choose Save and then try reloading the page.