javascript - 带有自定义滚动条的 jQuery 表格主体
问题描述
我正在使用 jquery 库来创建自定义滚动条 -https://codepen.io/dragospaulpop/pen/asBcI
我创建了一个简单的示例,但关键是使表格填充到页面的其余部分(不激活标准浏览器滚动条)。
我的代码是:
<head>
<meta charset="UTF-8">
<title>CSS Only Fixed Table Headers</title>
<link rel='stylesheet' href='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.min.js'></script>
</head>
<body>
<div style="width:100%;height:300px;background:red"></div>
<table class="fixed_headers">
<thead>
<tr>
<th>Name</th><th>Color</th><th>Description</th>
</tr>
</thead>
<tbody id="myBody">
</tbody>
</table>
<script>
$(window).load(function(){
$("#myBody").append(" <tr> <td>Apple</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Pear</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Grape</td><td>Purple / Green</td><td>These are purple and green.</td> </tr> <tr> <td>Orange</td><td>Orange</td><td>These are orange.</td> </tr> <tr> <td>Banana</td><td>Yellow</td><td>These are yellow.</td> </tr> <tr> <td>Kiwi</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Plum</td><td>Purple</td><td>These are Purple</td> </tr> <tr> <td>Watermelon</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Tomato</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cherry</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cantelope</td><td>Orange</td><td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td><td>Green</td><td>These are green inside.</td> </tr> <tr> <td>Papaya</td><td>Green</td><td>These are green.</td></tr><tr><td>Raspberry</td><td>Red</td><td>These are red.</td></tr><tr><td>Blueberry</td><td>Blue</td><td>These are blue.</td></tr><tr><td>Mango</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Passion Fruit</td><td>Green</td><td>These are green.</td></tr>");
$("tbody").mCustomScrollbar({
theme:"light-3",
scrollButtons:{
enable:false
},
mouseWheel:{ preventDefault: true },
scrollbarPosition: 'inside',
autoExpandScrollbar:true,
theme: 'dark'
});
});
</script>
<style>
tbody {
height: 150px;
overflow: hidden;
/*replace with auto to use default scroll*/
/*overflow: auto;*/
}
.fixed_headers {
table-layout: fixed;
border-collapse: collapse;
display: block;
width: 100%;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
box-sizing: border-box;
display: inline-block;
width: 33.33%;
}
.fixed_headers tr {
display: block;
width: 100%;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
display: block;
width: 100%;
}
.fixed_headers tbody {
display: block;
width: 100%;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
</style>
</body>
我想制作表格的高度:(page_height-red_div_height
页面的大小可以更改,因此可以是百分比)。所以完美的解决方案是red_div
始终具有相同的高度,但表格的高度不是 const (可能会因窗口大小而变化)。
我试图通过从那里删除并放在那里来更改css,height: 150px;
但tbody
结果height: 100%;
是错误的 - 标准浏览器滚动条被激活而不是自定义滚动条。然后我尝试更改 css,.fixed_headers tbody
但效果不佳。
如何解决这个问题?
是否有任何替代 jQuery 插件允许:
- 仅滚动tbody
- 动态添加tbody
内容
- 将元素 ( td
, tr
, tbody
) 大小声明为百分比
- 以编程方式自动滚动(到初始位置)
解决方案
推荐阅读
- python - 下标汤对象的
- javascript - Javascript“onmousedown”没有触发
- java - 解释为什么会发生错误的输出?
- sql - 在 cosmos db 中将字符串转换为日期时间
- c - CS50 复数 PSET3 - 代码似乎有效,但 check50 另有说明
- python - 将列表的元素插入到另一个列表的中间
- flutter - 需要帮助在颤振代码中复制设计
- java - 如何解决 tanukisoftware 包装器中的“WrapperSimpleApp: Unable to locate the class ...”
- sql - 连接两个表并获取女性计数大于男性计数的部门名称
- python - 使用 python 改进将数据帧加载到 postgress db