Как использовать rowspan и colspan в tbody, используя datatable.js?

Всякий раз, когда я использую <td colspan="x"></td>, я получаю следующую ошибку:

Uncaught TypeError: невозможно установить свойство '_DT_CellIndex' из undefined (...)

Demo

$("table").DataTable({});

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css'; return false;" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>

<table style="width:50%;">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td colspan="2">3 4</td>
      <td colspan="3">4 5 6</td>
    </tr>
  </tbody>
</table>

Ответ 1

Вы можете взломать отсутствие поддержки colspan, добавив "невидимую" ячейку для каждой удаленной ячейки:

<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>Normal column</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>

Таблицы данных не жалуются, таблица выглядит нормально и сортировка (невидимые столбцы сортируются как пустая строка).

Я не пробовал это с помощью rowspan.