Scrollable Table with fixed headers and fixed first column

Question

i have a table horizontalscrolling with fixed first column.

I am trying to make a table with fixed header and a scrollable

How to make table scrollable with fixed headers?

my js code

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

I have been searching for a week, i try some css but it not working.

Thanks in advance guys!

Rytis Dereskevicius · Accepted Answer · 2018-06-13 16:30:34Z

2

@Santiago was right. There are plenty of plugins for this purpose (also you could try DATATABLES, it gives the option not only fix header but also columns), but if you need just table header to be fixed you could use this CSS EXAMPLE - enjoy!

edited Jun 13, 2018 at 16:30

answered Jun 13, 2018 at 16:25

Rytis Dereskevicius

1,56116 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kavian K. · Accepted Answer · 2018-06-13 16:38:06Z

In the example below, The table is cloned twice and absolutely placed on top of the table. The first clone has the body and footer hidden and the second clone has the header and body hidden. The tables are placed at top:0 and bottom:0 respectively.

(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>

Note: To avoid the issue with scrollbars eating up space the absolutely placed tables are positioned within a holding div that already has scrollbars and thus will account for the different scrollbar widths of browsers, or indeed if scrollbars are only overlaid when needed as in Mac systems.

It works in modern browsers (IE11+, Edge, Chrome, Safari and Firefox). Probably not a good idea for massive or complicated tables.

Máster · Accepted Answer · 2018-06-13 16:30:44Z

0

There are tons of plugins for this. You may want to take a look at fixeHeaderTable() plugin, with a working demo: http://www.fixedheadertable.com/

UPDATE

I found a working fiddle that meets your requirements. You'll have to scroll the table all the way down to see its own horizontal scrollbar: https://jsfiddle.net/RMarsh/bzuasLcz/3/

edited Jun 13, 2018 at 16:30

answered Jun 13, 2018 at 16:07

Máster

1,00112 silver badges25 bronze badges

2 Comments

Jeremy Over a year ago

i want table fix left column and headers. but it only fix headers or left column

Jeremy Over a year ago

can i fix more than one column

Collectives™ on Stack Overflow

Scrollable Table with fixed headers and fixed first column

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related