jquery - 具有mcustomscrollbar和固定列标题的HTML表

我用滚动条创建了一个表，其中在滚动y时标题是固定的，在滚动表x时标题是滚动的。这是我的代码。

$(function () {
	$('table').on('scroll', function () {
		$("table > *").width($("table").width() + $("table").scrollLeft());
  });
});

html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>

但是问题是我无法使用mcustomscrollbar实现此功能。而且我希望使用mcustomscrollbar或滚动条上的任何其他有吸引力的CSS进行滚动的功能都不受浏览器的影响。如果有人知道该问题的解决方案，那么将感激不尽。

最佳答案

检查以下内容：

在您的脚本中添加-

$(".dataTables_scrollBody").mCustomScrollbar({  // custom scroll bar plugin
theme:"minimal-dark",  // custom scroll theme set
axis: "yx",     // custom scroll ver,hor scroll
callbacks: {    // callback for thead,tbody scroll
whileScrolling: function() {
$(".dataTables_scrollHead").scrollLeft(this.mcs.left *-1);
},
},
});

希望能帮助到你。需要更多信息，请检查此-

http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/callbacks_example.html