I have two html tables, first one is two rows 1 for headers and one for buttons to hide columns in table 2.
<table id="buttons" style="width: 100%;">
<tbody>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td style="text-align:center"><strong>Header 3</strong></td>
<td style="text-align:center"><strong>Header 4</strong></td>
<td style="text-align:center"><strong>Header 5</strong></td>
<td style="text-align:center"><strong>Header 6</strong></td>
<td style="text-align:center"><strong>Header 7</strong></td>
<td style="text-align:center"><strong>Header 8</strong></td>
<td style="text-align:center"><strong>Header 9</strong></td>
<td style="text-align:center"><strong>Header 10</strong></td>
<td style="text-align:center"><strong>Header 11</strong></td>
<td style="text-align:center"><strong>Header 12</strong></td>
<td style="text-align:center"><strong>Header 13</strong></td>
<td style="text-align:center"><strong>Header 14</strong></td>
<td style="text-align:center"><strong>Header 15</strong></td>
<td style="text-align:center"><strong>Header 16</strong></td>
<td style="text-align:center"><strong>Header 17</strong></td>
<td style="text-align:center"><strong>Header 18</strong></td>
<td style="text-align:center"><strong>Header 19</strong></td>
<td>Header 20</td>
<td style="text-align:center"><strong>Header 21</strong></td>
<td>Header 22</td>
<td>Header 23</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(2);" class="">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(3);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(4);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(5);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(6);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(7);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(8);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(9);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(10);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(11);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(12);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(13);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(14);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(15);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(16);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(17);">
<span class="slider round"></span>
</label>
</td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(18);">
<span class="slider round"></span>
</label>
</td>
<td></td>
<td style="text-align:center">
<label>
<input type="checkbox" checked="" onchange="javascript:show_hide_column(20);">
<span class="slider round"></span>
</label>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="relative-table wrapped confluenceTable" style="width: 100%;">
<tbody>
<tr>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 1</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 2</strong></td>
<td class="highlight-#b3d4ff confluenceTd" data-highlight-colour="#b3d4ff" style=""><strong>Header
3</strong>
</td>
<td class="highlight-#b3d4ff confluenceTd" data-highlight-colour="#b3d4ff"><strong>Header 4</strong>
</td>
<td class="highlight-#b3d4ff confluenceTd" data-highlight-colour="#b3d4ff"><strong>Header 5</strong>
</td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 6</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 7</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 8</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 9</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 10</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 11</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 12</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 13</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 14</strong></td>
<td class="highlight-#b3d4ff confluenceTd" data-highlight-colour="#b3d4ff"><strong>Header 15</strong>
</td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 16</strong></td>
<td class="highlight-#b3d4ff confluenceTd" data-highlight-colour="#b3d4ff"><strong>Header 17</strong>
</td>
<td class="highlight-#b3d4ff confluenceTd" data-highlight-colour="#b3d4ff"><strong>Header 18</strong>
</td>
<td class="highlight-#b3d4ff confluenceTd" data-highlight-colour="#b3d4ff"><strong>Header 19</strong>
</td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 20</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 21</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 22</strong></td>
<td class="highlight-#b3d4ff confluenceTd" title="Background color : Light blue 100%"
data-highlight-colour="#b3d4ff"><strong>Header 23</strong></td>
</tr>
<tr>
<td>23</td>
<td>45</td>
<td>12</td>
<td>67</td>
<td>89</td>
<td>34</td>
<td>56</td>
<td>78</td>
<td>90</td>
<td>32</td>
<td>43</td>
<td>21</td>
<td>76</td>
<td>88</td>
<td>35</td>
<td>54</td>
<td>78</td>
<td>45</td>
<td>67</td>
<td>23</td>
<td>12</td>
<td>56</td>
<td>89</td>
</tr>
<tr>
<td>23</td>
<td>45</td>
<td>12</td>
<td>67</td>
<td>89</td>
<td>34</td>
<td>56</td>
<td>78</td>
<td>90</td>
<td>32</td>
<td>43</td>
<td>21</td>
<td>76</td>
<td>88</td>
<td>35</td>
<td>54</td>
<td>78</td>
<td>45</td>
<td>67</td>
<td>23</td>
<td>12</td>
<td>56</td>
<td>89</td>
</tr>
<tr>
<td>This_is_a_very_long_text_to_display_what_my_real_table_looks_like</td>
<td>45</td>
<td>12</td>
<td>67</td>
<td>89</td>
<td>34</td>
<td>56</td>
<td>78</td>
<td>90</td>
<td>32</td>
<td>43</td>
<td>21</td>
<td>76</td>
<td>88</td>
<td>35</td>
<td>54</td>
<td>78</td>
<td>45</td>
<td>67</td>
<td>23</td>
<td>12</td>
<td>56</td>
<td>89</td>
</tr>
</tbody>
</table>
This is what it looks like
I want the columns to align with each other so each column in table 1 is equal to its respective column in table 2
I tried setting column groups to be equal to each other using the following JS code:
document.getElementById('buttons').style.width = document.getElementsByClassName('relative-table wrapped confluenceTable')[0].style.width
colgroup = document.getElementsByClassName('relative-table wrapped confluenceTable')[0].getElementsByTagName('colgroup')[0]
document.getElementById('buttons').getElementsByTagName('colgroup')[0].innerHTML = colgroup.innerHTML
yet no luck.
I also hard coded the column groups, using both pixels and percentages, into both tables and still no luck:
<colgroup>
<col style="width: 8.10965%;">
<col style="width: 4.71625%;">
<col style="width: 2.70322%;">
<col style="width: 2.70322%;">
<col style="width: 2.93328%;">
<col style="width: 3.04831%;">
<col style="width: 3.04831%;">
<col style="width: 3.04831%;">
<col style="width: 3.04831%;">
<col style="width: 3.04831%;">
<col style="width: 3.04831%;">
<col style="width: 3.04831%;">
<col style="width: 3.04831%;">
<col style="width: 3.27837%;">
<col style="width: 3.3934%;">
<col style="width: 3.3934%;">
<col style="width: 3.22085%;">
<col style="width: 3.16334%;">
<col style="width: 4.1411%;">
<col style="width: 7.24692%;">
<col style="width: 14.7814%;">
<col style="width: 5.11886%;">
<col style="width: 8.22468%;">
</colgroup>
How can I do this using vanilla html, css and js?
Note: the second table is a confluence page