Jquery 如何在表头插入div和don'；t破坏表结构？

我正在尝试实现具有可调整大小的列的表。当我使用

jQuery.after（）

为每个

条目在表头中插入resizer

元素时，表的结构被破坏，因为浏览器将这些新的

元素解释为新的列头，并相应地更改列结构。是否可以将几个

元素插入

元素并保留旧结构

样本结构

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

上校
 
上校
 
上校
上校

听起来您只是想使用

.append（）

而不是

.after（）

$（'th'）。追加（''）；

---

将向每个th添加一个div。

您可以在Fiddle上发布一个测试用例吗？您只能在单元格中放置一个

。如果您需要一个

div

，而不是每个单元格中单独的

div

，那么您可以添加一行，一个带有colspan的单元格，然后是一个div，你是对的，如果这个主意fails@Arsen7是正确的：a

div

不能是a

tr

@chris5marsh的直接子元素：请发布一个带有解释的答案。我不想在标题中插入新元素，因为它可能会改变标题元素的布局（我知道这一点，因为现在我在标题内部而不是外部插入大小调整器）那么您想在哪里添加元素呢？

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