Scroll table problem

RachelR please help me to solve that problem. I also want to do that.

Welcome to the forums, @configurationse.

Have you read through that topic and tried any of the solutions offered?

If you post the code you have so far, and explain the problem(s) you’re having with it, I expect somebody will be able to assist you.

<!DOCTYPE html>
<html>
<head>
	<title>Scroll2</title>
  <link rel="stylesheet" type="text/css" href="css/style4.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<!-- <h1 class="intro">Table with fixed header and footer (experimental use at own risk)</h1>
<p class="intro"><a href="https://codepen.io/paulobrien/pen/LjRNXa" target="_blank">See other example with only 1 clone needed</a>
<p class="intro">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.</p>
<p class="intro">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.</p> -->

<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 class="fixed-side" scope="col">Header 1</th>
          <th class="fixed-side" scope="col">Header 2</th>
          <th scope="col">Header 3 with longer content that wraps as required</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>

<!-- <p class="intro">Works in modern browsers (IE11+, Edge, Chrome, Safari and Firefox). Probably not a good idea for massive or complicated tables.</p> -->

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jsfile4.js" type="text/javascript"></script>

</body>
</html>

this is js file

//  jquery equivalent
jQuery(document).ready(function() {
   // jQuery(".main-table").clone(true).appendTo('#table-scroll .faux-table').addClass('clone');
   jQuery(".main-table").clone(true).appendTo('#table-scroll .faux-table').addClass('clone');
   jQuery(".main-table.clone").clone(true).appendTo('#table-scroll .faux-table').addClass('clone2'); 
   // jQuery(".main-table.clone").clone(true).appendTo('#table-scroll .faux-table'); 
 });


/*// requires jquery library
jQuery(document).ready(function() {
   jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone'); 
 });*/

// (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);
// })();

this is css file

.intro {
  max-width:1280px;
  margin:1em auto;
}
.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 #000;
  background: #fff;
  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:#000;
}
.faux-table thead th, .faux-table tfoot th, .faux-table tfoot td {
  background: #ccc;
}
.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;
}

Are you trying to do something like this pen?

No js needed now that position:sticky is available.

2 Likes

It has 40% part of my need. I want horizontal scroll too. My need same as RachelR’s one. She has said the problem clearly. Can I contact RachelR. May I know whether she has done this or not?

The example I showed above has horizontal scroll. What is it extra that you need?

The solutions in that other thread are mostly mine anyway so I doubt the original poster would have anything to add :slight_smile:

1 Like

It is vertical scrolling. I want both the scroll bars. Horizontal and vertical

I’ll say it again but a bit louder :slight_smile:

The demo has both vertical and horizontal scrolling .

Just resize the browser window smaller or set a width smaller than the content can display in to see the horizontal scrolling.

Ohhh…!! I’m very sorry. Now itself I got it. Thank you very much. Can I get the source code…?

Thank you thousands times. You have done me a great favor.:relaxed::relaxed::relaxed::relaxed: I found the source code also.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.