使用jQuery floatThead插件(1.2.10)在IE10中的布局问题

Question

我使用jQuery floatThead插件(版本1.2.10)浮动标题，同时滚动表的内容，但在IE10中遇到布局问题(在chrome中很好)。这是我的密码。

HTML：

<div class="scrollable-wrapper">
    <table id="tblDemo">
        <thead>
            <tr>
                <th>Student Name</th>
                <th>Course Name</th>
                <th>Is Completed</th>
                <th>Grade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="4">John</td>
            </tr>
            <tr>
                <td></td>
                <td>Science</td>
                <td>Yes</td>
                <td>A</td>
            </tr>
            <tr>
                <td></td>
                <td>Maths</td>
                <td>Yes</td>
                <td>B</td>
            </tr>
            <tr>
                <td></td>
                <td>Literature</td>
                <td>Yes</td>
                <td>A</td>
            </tr>
            <tr>
                <td colspan="4">Peter</td>
            </tr>
            <tr>
                <td></td>
                <td>Science</td>
                <td>Yes</td>
                <td>C</td>
            </tr>
            <tr>
                <td></td>
                <td>Maths</td>
                <td>Yes</td>
                <td>B</td>
            </tr>
            <tr>
                <td></td>
                <td>Literature</td>
                <td>Yes</td>
                <td>A</td>
            </tr>
            <tr>
                <td colspan="4">Helen</td>
            </tr>
            <tr>
                <td></td>
                <td>Science</td>
                <td>Yes</td>
                <td>C</td>
            </tr>
            <tr>
                <td></td>
                <td>Maths</td>
                <td>Yes</td>
                <td>B</td>
            </tr>
            <tr>
                <td></td>
                <td>Literature</td>
                <td>Yes</td>
                <td>A</td>
            </tr>
            <tr>
                <td colspan="4">Rob</td>
            </tr>
            <tr>
                <td></td>
                <td>Science</td>
                <td>Yes</td>
                <td>C</td>
            </tr>
            <tr>
                <td></td>
                <td>Maths</td>
                <td>Yes</td>
                <td>B</td>
            </tr>
            <tr>
                <td></td>
                <td>Literature</td>
                <td>Yes</td>
                <td>A</td>
            </tr>
            <tr>
                <td colspan="4">Dave</td>
            </tr>
            <tr>
                <td></td>
                <td>Science</td>
                <td>Yes</td>
                <td>C</td>
            </tr>
            <tr>
                <td></td>
                <td>Maths</td>
                <td>Yes</td>
                <td>B</td>
            </tr>
            <tr>
                <td></td>
                <td>Literature</td>
                <td>Yes</td>
                <td>A</td>
            </tr>
            <tr>
                <td colspan="4">Tyson</td>
            </tr>
            <tr>
                <td></td>
                <td>Science</td>
                <td>Yes</td>
                <td>C</td>
            </tr>
            <tr>
                <td></td>
                <td>Maths</td>
                <td>Yes</td>
                <td>B</td>
            </tr>
            <tr>
                <td></td>
                <td>Literature</td>
                <td>Yes</td>
                <td>A</td>
            </tr>
            <tr>
                <td colspan="4">Danny</td>
            </tr>
            <tr>
                <td></td>
                <td>Science</td>
                <td>Yes</td>
                <td>C</td>
            </tr>
            <tr>
                <td></td>
                <td>Maths</td>
                <td>Yes</td>
                <td>B</td>
            </tr>
            <tr>
                <td></td>
                <td>Literature</td>
                <td>Yes</td>
                <td>A</td>
            </tr>
            <tr>
                <td colspan="4">Aahna</td>
            </tr>
            <tr>
                <td></td>
                <td>Science</td>
                <td>Yes</td>
                <td>C</td>
            </tr>
            <tr>
                <td></td>
                <td>Maths</td>
                <td>Yes</td>
                <td>B</td>
            </tr>
            <tr>
                <td></td>
                <td>Literature</td>
                <td>Yes</td>
                <td>A</td>
            </tr>
        </tbody>
    </table>
</div>

<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.10/jquery.floatThead.js"></script>

Javascript：

var $demo1 = $('#tblDemo');
$demo1.floatThead({
    scrollContainer: function () {
        return $demo1.closest('div');
    }
});

CSS：

.scrollable-wrapper {
    height: 200px;
    overflow: auto;
}

table{
    width:100%;
}

在IE10中查看生成的布局时，学生名为"John“的行移到标题行，因此不可见。这个镀铬的效果很好。这个问题似乎是由于一行只有一个TD，并将colspan设置为4，用于打印学生姓名。如何在IE10中修复它？

下面是上面代码的JSFiddle。

Answer 1

好的。这是通过将另一个选项getSizingRow添加到floatThead选项来解决的，它指向TD元素中没有colspan的行。这是更新的代码..。

var $demo1 = $('#tblDemo');
$demo1.floatThead({
    scrollContainer: function () {
        return $demo1.closest('div');
    },
    getSizingRow: function($element) {
        return $element.find('tbody tr:nth-child(2)>*');
    }
});