JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mylist">
   <thead>
      <tr>
         <th scope="col" rowspan="2">Category</th>
         <th scope="col" rowspan="2">Category 2</th>
         <th scope="colgroup" colspan="5" class="dark">Headline 1</th>
         <th scope="colgroup" colspan="4" class="dark">Headline 2</th>
      </tr>
      <tr>
         <th scope="col">Term 1</th>
         <th scope="col">Term 2</th>
         <th scope="col">Term 3</th>
         <th scope="col">Full</th>
         <th scope="col">Double</th>
         <th scope="col">Term 1</th>
         <th scope="col">Term 2</th>
         <th scope="col">Full</th>
         <th scope="col">Double</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td rowspan="2">Category 1 Line</td>
         <td>Category 2 Line</td>
         <td>x</td>
         <td>x</td>
         <td>x</td>
         <td>x</td>
         <td>x</td>
         <td> </td>
         <td>x</td>
         <td>x</td>
         <td> </td>
      </tr>
      <tr>
         <td>Category 2 Line </td>
         <td>x</td>
         <td>x</td>
         <td>x</td>
         <td> </td>
         <td> </td>
         <td>x</td>
         <td>x</td>
         <td>x</td>
         <td> </td>
      </tr>
   </tbody>
</table>

CSS

th {background:#555; color:#fff;}
th.dark {background:#333;}

td:nth-of-type(n+3) {text-align:center;}

JavaScript

$('tr:not(:has(td[rowspan])) td').css('text-align', 'center');