使用jQueryUIAccordion在表行上未对齐标题行

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

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

这是可行的，但只是在一定程度上。发生的情况是，第一列（星期日）的colspan似乎为7，其余6列被推到右侧（参见所附的屏幕截图）。单击右侧的标题可以根据需要展开和收缩部分，但我只需要将它们正确对齐

我该如何解决这个问题？我是否需要在表中执行一些不同的操作，或者在代码中执行一些额外的步骤

谢谢

---

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

应用accordion插件后，行的标记是什么样子的？在表中创建无效的html

..

您可以自己从jQueryUI添加类，并创建自己的隐藏/显示代码。最终的结果将非常接近手风琴视觉

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