colspan的数据表问题，使用“ display：none”

Question

我正在使用像这样的数据表：

https://datatables.net/examples/api/row_details.html

我做了一点修改，看起来像

<table id="bsp" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th></th>
      <th>aaa</th>
      <th>bbb</th>
      <th>ccc</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class='details-control'></td>
      <td>AAA-1111</td>
      <td>BBB-1111</td>
      <td>CCC-1111</td>
    </tr>
    <tr class='showDetails'>
      <td colspan='4'>
        <table class='table table-bordered'>
          <tr>
            <th>xxxx</th>
            <th>yyyy</th>
          </tr>
          <tr>
            <td>aaaa</td>
            <td>bbbb</td>
          </tr>
          <tr>
            <td>cccc</td>
            <td>dddd</td>
          </tr>
        </table>               
      </td>
      <td style='display: none'></td>
      <td style='display: none'></td>
      <td style='display: none'></td>
    </tr>
    <tr>
      <td class='details-control'></td>
      <td>AAA-2222</td>
      <td>BBB-2222</td>
      <td>CCC-2222</td>
    </tr>
    <tr class='showDetails'>
      <td colspan='4'>
        <table class='table table-bordered'>
          <tr>
            <th>xxxx</th>
            <th>yyyy</th>
          </tr>
          <tr>
            <td>eeee</td>
            <td>ffff</td>
          </tr>
          <tr>
            <td>gggg</td>
            <td>hhhh</td>
          </tr>
        </table>                               
      </td>
      <td style='display: none'></td>
      <td style='display: none'></td>
      <td style='display: none'></td>
    </tr>
  </tbody>
</table>

我知道数据表不支持'colspan'以及如何解决该问题。但是当我使用上面的代码时，它将无法正常工作。有人有什么主意吗？