具有固定标题和固定第一列的可滚动表
[英]Scrollable Table with fixed headers and fixed first column
问题描述
我有一个表horizontalscrolling与固定的第一列。
我试图制作一个固定标题和可滚动的表格
如何使用固定标题使表格可滚动？
我的js代码
// requires jquery library jQuery(document).ready(function() { jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone'); }); Below is my CSS
.table-scroll { position:relative; max-width:600px; margin:auto; overflow:hidden; border:1px solid #000; } .table-wrap { width:100%; overflow:auto; } .table-scroll table { width:100%; margin:auto; border-collapse:separate; border-spacing:0; } .table-scroll th, .table-scroll td { padding:5px 10px; border:1px solid #000; background:#fff; white-space:nowrap; vertical-align:top; } .table-scroll thead, .table-scroll tfoot { background:#f9f9f9; } .clone { position:absolute; top:0; left:0; pointer-events:none; } .clone th, .clone td { visibility:hidden } .clone td, .clone th { border-color:transparent } .clone tbody th { visibility:visible; color:red; } .clone .fixed-side { border:1px solid #000; background:#eee; visibility:visible; } .clone thead, .clone tfoot{background:transparent;} Below is my html code.
<html lang="en" > <head> <meta charset="UTF-8"> <title>Horizontal scrolling table with Fixed first column</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="table-scroll" class="table-scroll"> <div class="table-wrap"> <table class="main-table"> <thead id="header-fixed"> <tr> <th class="fixed-side" scope="col" colspan="2"> </th> <th scope="col">Header 3</th> <th scope="col">Header 4</th> <th scope="col">Header 5</th> <th scope="col">Header 6</th> <th scope="col">Header 7</th> <th scope="col">Header 8</th> </tr> </thead> <tbody> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content<br> test</td> <td><a href="#">Cell content longer</a></td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side" colspan="2">Left Column</th> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content<br> test</td> <td><a href="#">Cell content longer</a></td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side" colspan="2">Left Column</th> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content<br> test</td> <td><a href="#">Cell content longer</a></td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side" colspan="2">Left Column</th> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content<br> test</td> <td><a href="#">Cell content longer</a></td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side" colspan="2">Left Column</th> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td class="fixed-side">Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> </tbody> <tfoot> <tr> <th class="fixed-side"> </th> <td class="fixed-side">Footer 2</td> <td>Footer 3</td> <td>Footer 4</td> <td>Footer 5</td> <td>Footer 6</td> <td>Footer 7</td> <td>Footer 8</td> </tr> </tfoot> </table> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> </body> </html>
我一直在寻找一个星期，我尝试了一些css但它没有用。
先谢谢你们！
3 个解决方案
解决方案1
2 2018-06-13 16:25:20
@Santiago是对的。 有很多插件用于此目的（也可以尝试DATATABLES ，它提供的选项不仅可以修复标题而且还有列），但如果您只需要修复表标题，您可以使用此CSS 示例 - 享受！
解决方案2
1 2018-06-13 16:38:06
在下面的示例中，表格被克隆两次，绝对放在表格的顶部。 第一个克隆隐藏了主体和页脚，第二个克隆隐藏了标题和正文。 表格分别位于顶部：0和底部：0。
(function() { var fauxTable = document.getElementById( 'faux-table' ); var mainTable = document.getElementById( 'main-table' ); var clonedElement = mainTable.cloneNode( true ); var clonedElement2 = mainTable.cloneNode( true ); clonedElement.id = ''; clonedElement2.id = ''; fauxTable.appendChild( clonedElement ); fauxTable.appendChild( clonedElement2 ); })();
.table-scroll { position: relative; max-width: 1280px; width: 100%; margin: auto; display: table } .table-wrap { width: 100%; display: block; height: 300px; overflow: auto; position: relative; z-index: 1 } .table-scroll table { width: 100%; margin: auto; border-collapse: separate; border-spacing: 0 } .table-scroll th, .table-scroll td { padding: 5px 10px; border: 1px solid #625750; background-color: #c6bcb6; vertical-align: top } .faux-table table { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none } .faux-table table + table { top: auto; bottom: 0 } .faux-table table tbody, .faux-table tfoot { visibility: hidden; border-color: transparent } .faux-table table + table thead { visibility: hidden; border-color: transparent } .faux-table table + table tfoot{ visibility: visible; border-color: transparent } .faux-table thead th, .faux-table tfoot th, .faux-table tfoot td { background-color: #96897f } .faux-table { position: absolute; top: 0; right: 0; left: 0; bottom: 0; overflow-y: scroll } .faux-table thead, .faux-table tfoot, .faux-table thead th, .faux-table tfoot th, .faux-table tfoot td { position: relative; z-index: 2 }
<div id="table-scroll" class="table-scroll"> <div id="faux-table" class="faux-table" aria="hidden"></div> <div class="table-wrap"> <table id="main-table" class="main-table"> <thead> <tr> <th scope="col">Header 1</th> <th scope="col">Header 2</th> <th scope="col">Header 3 with longer</th> <th scope="col">Header 4</th> <th scope="col">Header 5</th> <th scope="col">Header 6</th> <th scope="col">Header 7</th> <th scope="col">Header 8</th> </tr> </thead> <tbody> <tr> <th>Left Column</th> <td>Cell content<br> test </td> <td><a href="#">Cell content longer</a></td> <td>Cell content with more content and more content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th>Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> </tbody> <tfoot> <tr> <th>Footer 1</th> <td>Footer 2</td> <td>Footer 3</td> <td>Footer 4</td> <td>Footer 5</td> <td>Footer 6</td> <td>Footer 7</td> <td>Footer 8</td> </tr> </tfoot> </table> </div> </div>
注意：为了避免滚动条消耗空间的问题，绝对放置的表位于已经具有滚动条的保持div中，因此将考虑浏览器的不同滚动条宽度，或者实际上如果滚动条仅在需要时覆盖，如在Mac系统中。
它适用于现代浏览器（IE11 +，Edge，Chrome，Safari和Firefox）。 对于大型或复杂的表格可能不是一个好主意。
解决方案3
0 2018-06-13 16:07:25
这有很多插件。 您可能需要查看fixeHeaderTable()插件，以及一个可用的演示： http ： //www.fixedheadertable.com/
UPDATE
我找到了一个符合你要求的工作小提琴。 您必须将表格一直向下滚动以查看其自己的水平滚动条： https ： //jsfiddle.net/RMarsh/bzuasLcz/3/
具有固定标题和列以及选择性固定行的可滚动表
[英]Scrollable table with fixed header and column as well as selective fixed rows
如何在bootstrap模态体上创建一个带有固定标题的可滚动表？
[英]how to create a scrollable table with fixed headers on a bootstrap modal body?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.