我想要做的是使用 css 或 jquery 修复表格的一列或几列,以便在滚动表格时它们不会移动,到目前为止我所拥有的是:
table {
display: block;
overflow-x: auto;
}
.static {
position: fixed;
background: #fff;
}
.first-col {
padding-left: 74.5px!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table class="table table-bordered" id="example">
<thead>
<tr >
<th>Fecha</th>
<th class="static">Concepto</th>
<th class="first-col">CC</th>
<th >Last</th>
<th >Handle</th>
<th >First</th>
<th >Last</th>
<th >Handle</th>
<th >First</th>
<th >Last</th>
<th >Handle</th>
<th >Handle</th>
<th >First</th>
<th >Last</th>
<th >Handle</th>
<th >Last</th>
<th >Handle</th>
<th >First</th>
<th >Last</th>
<th >Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>03/08/2019</td>
<td class="static">FIJAR</td>
<td class="first-col">0</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>03/08/2019</td>
<td class="static">FIJAR</td>
<td class="first-col">0</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>03/08/2019</td>
<td class="static">FIJAR</td>
<td class="first-col">4</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
它可以工作,但是当要修复的列内的文本非常大时,问题就来了,我已经搜索了数千个解决方案,但我无法找到真正符合我要求的东西。
如果您能帮助我,我将不胜感激,因为我一直在寻找并且我没有找到解决方案。我已经在这个论坛上看到了其他问题,但是他们给出的解决方案并没有像我想的那样对我有用。
我找到了一个名为 fixedColumns 的库,它可以工作,在这个项目中我使用的是 adminlte 模板,问题是这个模板使用 adminlte.min.js 文件,该文件是模板正常工作所必需的,并且在那里添加 fixedColumns 库时是一些不兼容,所以它使表看起来很糟糕。
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js"></script>
<script src="../dist/js/adminlte.min.js"></script>
CSS:
th, td { white-space: nowrap; }
tr:nth-child(odd) {
background-color: #ffffff!important;
}
tr:nth-child(even) {
background-color: #c7d1dd!important;
}
JS:
$(document).ready(function() {
var table = $('#example').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
searching: false,
bFilter: false,
ordering: false,
bInfo: false,
fixedColumns: {
leftColumns: 2
}
});
});
HTML:
<table class="table" style="width: 100%;" id="example">
<thead>
<tr>
<th>Fecha</th>
<th>Concepto</th>
<th>CC</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>03/08/2019</td>
<td>FIJAR</td>
<td>0</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>03/08/2019</td>
<td>FIJAR</td>
<td>0</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>03/08/2019</td>
<td>FIJAR</td>
<td>4</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
我怎么能解决这种不兼容问题,因为我必须要使用 fixedColumns 库才能使固定列定位起作用,而 adminlte.min.js 文件才能使 AdminLTE 模板起作用?
我搜索了几个小时后发现如下:
我正在使用 1.10.16 版的 JQuery DataTables
由于某种原因无法在其 3.3.0 版本中与fixedColumns库一起正常工作的版本(我不知道在以前的版本中是否没有问题)所以我将 JQuery DataTables 的版本更改为 1.10.20 并使用此版本没有给我带来问题。