我有一个HTML表格，其中有许多行和多个列。我想将td附加到其中的一些行，这样td看起来就像一个新行，并跨越表格的整个宽度。这对于将单个表格行的所有数据保存在同一个tr标记下非常有用，并允许我显示与同一行相关的额外数据，但这些数据不会适合在一个表列中，就像长格式的笔记。例如：

<table>
  <thead>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
      <td class="magic" colspan="3">
        This is long-form data that should look like a full-width
        row without creating an extra tr tag to hold it.
      </td>
    </tr>
  </tbody>
</table>

字符串
请注意，同一个表还使用了jquery-ui的sortable API来允许拖放行以便对它们进行排序。
我如何做到这一点，而不弄乱我的标记与非法的div或放弃html表完全？