具有固定标题和固定第一列的可滚动表

时间：2018-06-13 15:10:11

标签： javascript html css

我有一个表格横向滚动，固定的第一列。

我正在尝试制作一个带有固定标题和可滚动

的表格

如何使用固定标题使表格可滚动？

我的js代码

DecimalFormat
// 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.

我一直在寻找一周，我尝试了一些css但它没有用。

先谢谢你们！

3 个答案:

答案 0 :(得分：2)

@Santiago是对的。有很多插件用于此目的（也可以尝试DATATABLES，它不仅可以选择修复标题，还可以选择列），但是如果只需要修复表头，则可以使用此CSS {{3 - 享受！

答案 1 :(得分：1)

在下面的示例中，表格被克隆两次，绝对放在表格的顶部。第一个克隆隐藏了主体和页脚，第二个克隆隐藏了标题和正文。表格分别位于顶部：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）。对于大型或复杂的表格可能不是一个好主意。

答案 2 :(得分：0)

这有很多插件。您可能需要查看fixeHeaderTable()插件，并附带一个有效的演示：http://www.fixedheadertable.com/

<强>更新

我发现了一个符合你要求的工作小提琴。您必须将表格一直向下滚动以查看其自己的水平滚动条：https://jsfiddle.net/RMarsh/bzuasLcz/3/

相关问题
最新问题