Header rows misaligned using jQuery UI accordion on table rows


I have a table with the following structure:

<table id="cfd-duty-table">
  <thead>
    <tr>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>
  </thead>
  <tbody>
    <tr class="accordion">
      <td colspan=7>Row Title 1</td>
    </tr>
    <tr class="data-row">
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
    </tr> 
    <tr class="header-row">
      <td colspan=7>Row Title 2</td>
    </tr>
    <tr class="data-row">
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
      <td><table>a bunch of data here</table></td>
    </tr>
  </tbody>
</table>

What I'm trying to do is use jQuery UI accordion so that the accordion class rows are used as section headers, and when clicking on them, the next row (class="data-row") with all the data-rows in it collapses.

According to the documentation for the header option, the content panel must be the sibling immediately after their associated headers, so I'm trying this code (in the form of a Drupal jQuery behavior):

(function ($) {
  Drupal.behaviors.cfdDutyTableAccordion = {
    attach: function (context, settings) {
      $('table#cfd-duty-table').accordion({header: 'tr.accordion'});
    }
  }
})(jQuery);

This is working, but only to a certain extent. What happens is that it appears as though the first column (Sunday) gets a colspan of 7, and the remaining 6 columns, get pushed off to the right (see attached screen shot). Clicking on the titles to the right expands and contracts the sections as desired, but I just need to get them aligned properly.

enter image description here

How do I fix this? Do I need to do something different in my table, or some additional steps in my code?

Thanks.

UPDATE: Per @charlietfl's comment below, I looked more closely at the markup, and it seems to be the span tag that is added by the accordion code inside the tag that causes the alignment problem. Using the dev tools in Chrome, I removed that span, and the section header text ended up properly aligning where it should.


Answers: