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

我正在使用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”的行移到标题行，因此不可见。这在chrome中效果很好。问题似乎是由于该行只有一个TD，而colspan设置为4才能打印学生姓名。如何在IE10中修复？

这是上述代码的JSFiddle。

最佳答案

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

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