标头行使用表行上的jQuery UI手风琴未对齐

Question

我有一个具有以下结构的表：

<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>

我要做的是使用jQuery UI手风琴，以便将手风琴类行用作节头，当点击它们时，下一行（class =“data-row”）包含所有数据 - 它中的行会崩溃。

根据header选项的文档，内容面板必须是它们关联头之后的兄弟，所以我正在尝试这段代码（以Drupal jQuery行为的形式）：

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

这是有效的，但只是在一定程度上。会发生的情况是，看起来好像第一列（星期日）获得了7的colspan，剩下的6列被推到了右边（参见随附的屏幕截图）。单击右侧的标题会根据需要展开和收缩各个部分，但我只需要将它们正确对齐。

我该如何解决这个问题？我需要在表格中做一些不同的事情，还是在我的代码中做一些额外的步骤？

感谢。

更新：下面的Per @ charlietfl评论中，我更仔细地查看了标记，它似乎是由标签中的手风琴代码添加的span标签，导致对齐问题。使用Chrome中的开发工具，我删除了该范围，并且部分标题文本最终正确地对齐了应有的位置。