javascript - 使用纯 JavaScript 修复了带有垂直和水平滚动条的表头
问题描述
我正在使用 jasper 报告,它以表格格式提供输出。大约有 16 列我需要在垂直和水平滚动时修复表头。任何人都可以通过提供纯 JavaScript 的解决方案来提供帮助,而无需使用 Jquery 插件吗?
解决方案
简单易用,您可以使用scroll
属性示例创建垂直和水平滚动条,如下所示:
$('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: 1px solid #ddd;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
<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>AAAAAAAAAAAAAAAAAAAAAAAAAA</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>
推荐阅读
- python - 将 matplotlib.pyplot 导入为 plt 时出现 TypeError
- html - 移动和桌面视图中右侧的空间
- winforms - 传参数上报 Devexpress
- matlab - MATLAB中FFT结果的幅度和相位
- reactjs - 类和函数组件之间的 redux 动作调度有何不同?
- api - API建模:两个同名资源
- node.js - 如何在 discord.js 中为我的 args 添加价值?
- flutter - 颤振使可拖动小部件也成为拖动目标
- c++ - Qt for WebAssembly Checkboxes 和 Comboboxes 显示错误
- javascript - solving google captcha with 2captcha in puppeteer