拖拽table表格实现横向滚动
- 2024-01-10
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>表格</title>
<style type="text/css">
.table{width: 800px;}
.divTable{
width: 500px;
overflow: auto;
}
</style>
</head>
<body>
<div class="divTable">
<table class="table" border="" cellspacing="" cellpadding="">
<tr><th>文件</th><th>文件2</th><th>文件</th><th>文件2</th></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
</div>
<script type="text/javascript">
function inserted() {
let el = document.getElementsByClassName('divTable')[0];
el.style.cursor = 'grab';
el.onmousedown = function(enent) {
let gapX = event.clientX;
let startX = el.scrollLeft;
document.onmousemove = function(e) {
let x = e.clientX - gapX;
el.scrollLeft = startX - x;
return false;
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
inserted();
</script>
</body>
</html>