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

【问题标题】：Scrollable Table with fixed headers and fixed first column具有固定标题和固定第一列的可滚动表
【发布时间】：2018-06-13 15:10:11
【问题描述】：

我有一个固定第一列的表格水平滚动。

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

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

我的 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">&nbsp;</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">&nbsp;</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 但它不起作用。

提前谢谢各位！

【问题讨论】：

    标签： javascript html css


    【解决方案1】：

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

    【讨论】：

      【解决方案2】：

      在下面的示例中，表格被克隆了两次，并且绝对放置在表格的顶部。第一个克隆隐藏了正文和页脚，第二个克隆隐藏了页眉和正文。表格分别位于 top:0 和 bottom: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】：

        为此有大量的插件。你可能想看看fixeHeaderTable() 插件，带有工作演示：http://www.fixedheadertable.com/

        更新

        我找到了一个满足您要求的工作小提琴。您必须一直向下滚动表格才能看到它自己的水平滚动条：https://jsfiddle.net/RMarsh/bzuasLcz/3/

        【讨论】：

        • 我想要表格修复左列和标题。但它只修复标题或左列
        • 我可以修复多个列吗
        猜你喜欢
        • 2012-01-27
        • 1970-01-01
        • 2014-02-22
        • 2017-11-22
        • 2016-07-05
        • 1970-01-01
        • 1970-01-01
        • 2019-12-17
        • 2019-08-15
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode