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”的行移至标题行，因此不可见。这在chrome中运行良好。问题似乎是由于行只有一个TD，其中colspan设置为4，用于打印学生姓名。如何在IE10中修复它？

以上代码为JSFiddle。

Answer 1

行。这是通过向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)>*');
    }
});

在IE10中使用jQuery floatThead插件（1.2.10）的布局问题

1 个答案: