我试图通过水平滚动使第一个2列应使用固定的情况而不滚动
进行固定位置。HTML代码是以下
<table class="table display nowrap">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
<th>i</th>
</tr>
</thead>
<tbody>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
</tbody>
</table>
和jQuery代码是
$('.table').DataTable( {
"searching": false ,
"paging": false ,
fixedColumns: {
leftColumns: 1
},
scrollX: true,
});
因此，当我使用数据库库运行这两个代码的组合时，结果是以下
结果的屏幕截图
我无法在您报告的情况下重现问题。以下是我尝试过的代码。似乎对您想要的东西感到满意。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DataTable demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<style>
/* Ensure that the demo table scrolls */
th, td {
white-space: nowrap;
}
div.dataTables_wrapper {
width: 200px;
margin: 0 auto;
}
</style>
<script>
$(document).ready(function() {
var table = $('.table').DataTable( {
scrollY: "600px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1,
// rightColumns: 1
}
} );
} );
</script>
</head>
<body>
<table class="table display nowrap">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
<th>i</th>
</tr>
</thead>
<tbody>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
<tr>
<td>a data</td>
<td>b data</td>
<td>c data</td>
<td>d data</td>
<td>e data</td>
<td>f data</td>
<td>g data</td>
<td>h data</td>
<td>i data</td>
</tr>
</tbody>
</table>
</body>
</html>
希望这对您有帮助。