带有mcustomscrollbar和固定列标题的HTML表

时间：2016-02-09 10:34:59

标签： jquery css scroll html-table mcustomscrollbar

我创建了一个带滚动条的表格，其中标题是固定的，同时滚动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滚动功能，这些功能不受浏览器的影响。如果有人知道这个问题的解决方案，那么答案将不胜感激。

3 个答案:

答案 0 :(得分：1)

检查以下内容：

在您的脚本中添加此内容 - 

$(".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

答案 1 :(得分：1)

制作一个这样的表

<div class="graphData" data-mcs-axis="x">
    <table class="fixed_headers">
        <thead>
            <tr><th>data1</th><th>data2</th><th>data3</th></tr>   
        </thead>
        <tbody >
            <tr><td>data1</td><td>data2</td><td>data3</td></tr>
            <tr><td>data1</td><td>data2</td><td>data3</td></tr>
            <tr><td>data1</td><td>data2</td><td>data3</td></tr>
            ...
        </tbody>
    </table>
</div>

在</body>

之前添加脚本 
$(window).load(function(){

  $("table.fixed_headers tbody").mCustomScrollbar({
    mouseWheel:{ preventDefault: true },
    autoExpandScrollbar:true
  });

  $(".graphData").mCustomScrollbar({
            scrollbarPosition:"outside"
  });
});

此脚本会添加x滚动到标题，xy滚动到tbody

答案 2 :(得分：0)

检查以下方式，您可以使用mCustomScrollbar。使用$("tbody").mCustomScrollbar({

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

  $("tbody").mCustomScrollbar({
    theme:"light-3",
    scrollButtons:{
      enable:false
    },
    mouseWheel:{ preventDefault: true },
    scrollbarPosition: 'inside',
    autoExpandScrollbar:true,
    theme: 'dark',
     axis:"yx",
                setWidth: "auto"
  });

});
＆＃13; 
html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow: hidden;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow: hidden;
    height: 140px;
}

td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<script src="https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题