Как вставить div в заголовок таблицы и не испортить структуру таблицы?

Question

Я пытаюсь реализовать таблицу с изменяемым размером столбцов.Когда я вставляю элемент resizer <div> в заголовок таблицы с jQuery.after() для каждой записи <th>, структура таблицы нарушается, поскольку браузер интерпретирует эти новые элементы <div> как новые заголовки столбцов и соответствующим образом меняет структуру столбцов.Можно ли вставить несколько элементов <div> в элемент <thead> и сохранить старую структуру?

Структура образца

<table>
    <thead>
        <tr>
            <th> col </th>
            <div style="width:2px;height:10px;">&nbsp</div>
            <th> col </th>
            <div style="width:2px;height:10px;">&nbsp</div>
        </tr>
    </thead>
    <tbody>
        <tr>
         <td> col </td>
         <td> col </td>
    </tbody>
</table>

Answer 1

Может быть, вы должны посмотреть на jQuery.grid и посмотреть, как он реализует изменение размера столбца http://www.ita.es/jquery/jquery.grid.columnSizing.htm

Answer 2

Звучит так, будто вы просто хотите использовать .append() вместо .after()

$('th').append('<div class="resizer">');

Добавит div к каждому th.

Answer 3

Этот вопрос переполнения стека задает аналогичную вещь, и там есть несколько хороших ответов. Flexigrid выглядит хорошо и позволяет изменять размер столбцов.

Написание собственной версии с нуля возможно, но довольно сложно.