Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How can I move a scrollbar from inside to outside a table?

Tags:

javascript

jquery

css

I have this scrollable table and notice that it only move its tbody not its thead and that's how it should be, but the scrollbar is inside the table which makes the thead and the tbody disarrange, so I had an idea to move the scrolllbar to outside the table, but I don't know how to do it to a scrollbar. Can you tell me how I can do it?

"Live long and prosper"

From this

enter image description here

To this enter image description here

function removeClassName(elem, className) {
  elem.className = elem.className.replace(className, "").trim();
}

function addCSSClass(elem, className) {
  removeClassName(elem, className);
  elem.className = (elem.className + " " + className).trim();
}

String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/, "");
};

function stripedTable() {
  if (document.getElementById && document.getElementsByTagName) {
    var allTables = document.getElementsByTagName('table');
    if (!allTables) {
      return;
    }

    for (var i = 0; i < allTables.length; i++) {
      if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
        var trs = allTables[i].getElementsByTagName("tr");
        for (var j = 0; j < trs.length; j++) {
          removeClassName(trs[j], 'alternateRow');
          addCSSClass(trs[j], 'normalRow');
        }
        for (var k = 0; k < trs.length; k += 2) {
          removeClassName(trs[k], 'normalRow');
          addCSSClass(trs[k], 'alternateRow');
        }
      }
    }
  }
}

function calcTh() {

  var table = document.getElementsByTagName(table);
  for (var i = 0; i < table.length; i++) {
    table[i].width = (100 / table.length) + "%";
  }
}

function calc() {
  var table = document.getElementById("Stable");
  var w = table.offsetWidth; //total width of the table

  for (var y = 0; y < table.rows.length; y++) { // cycle through rows
    var row = table.rows[y];
    for (var x = 0; x < row.cells.length; x++) { // cycle through cells
      var cell = row.cells[x];
      cell.style.width = (w / row.cells.length) + "px"; // add 'px' for a unit
    }
  }
}

window.onload = function() {
  stripedTable();
  calc();
};
window.onresize = function() {
  stripedTable();
  calcTh();
  calc();
};
th {
  word-break: break-all;
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background: #FFF;
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 10px;
  padding: 0;
}
table,
td,
a {
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
  font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 0 0 5px 0
}
div.tableContainer {
  clear: both;
  border: 1px solid #963;
  height: 285px;
  overflow: auto;
  width: 100%;
}
html>body div.tableContainer {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
div.tableContainer table {
  float: left;
  width: 100%;
}
html>body div.tableContainer table {
  width: 100%;
}
thead.fixedHeader tr {
  position: relative
}
html>body thead.fixedHeader tr {
  display: block
}
thead.fixedHeader th {
  background: #C96;
  border-left: 1px solid #EB8;
  border-right: 1px solid #B74;
  border-top: 1px solid #EB8;
  font-weight: normal;
  padding: 4px 3px;
  text-align: left
}
thead.fixedHeader a,
thead.fixedHeader a:link,
thead.fixedHeader a:visited {
  color: #FFF;
  display: block;
  text-decoration: none;
  width: 100%
}
thead.fixedHeader a:hover {
  color: #FFF;
  display: block;
  text-decoration: underline;
  width: 100%
}
html>body tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
  width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */

/* http://www.alistapart.com/articles/zebratables/                             */

tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
  background: #EEE;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Pure CSS Scrollable Table with Fixed Header</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="language" content="en-us">

  <style type="text/css"></style>
</head>

<body>

  <h1>Pure CSS Scrollable Table with Fixed Header</h1>


  <div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable" id="Stable">
      <thead class="fixedHeader">
        <tr class="alternateRow">
          <th><a href="#">Header 1ahjsgdhjagsdhjgahjsdghjasgdhjagshjdgahjsdghjagsdhj</a>
          </th>
          <th><a href="#">Header 2</a>
          </th>
          <th><a href="#">Header 3</a>
          </th>
        </tr>
      </thead>
      <tbody class="scrollContent">
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div>
    <br>
  </div>



</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span>

</html>
like image 580
Kyle Avatar asked Jul 16 '15 13:07

Kyle

1 Answers

This achieves the correct effect for me:

html>body div.tableContainer table {
  width: calc(100% - 16px);
  overflow: visible;
}

.html>body tbody.scrollContent {
  width: calc(100% + 16px);
}

However, it assumes that the scrollbar is 16px wide, which may vary among browsers.

like image 199
Jivings Avatar answered Sep 29 '22 16:09

Jivings
Sign in to Comment

Related questions

How can I use grunt-uncss with an AngularJS application?
ES6 module concatenation
HTML5 segment color?
How to use onclick with a function expression rather than a declared function?
Ionic ion-content not scrolling down when keyboard shows (Android)
Get ClientId of control in Repeater
Stuck with Slick Carousel "Center mode"
emberjs get all form fields / values at once
Angular ui-select tagging lose text input on blur
Pasting from a file browser and HTML5 Clipboard API
Babelify sourceType error when used programmatically
Javascript static methods vs prototypal/instatiated methods on performance
How to save page state during close
Use "5 days ago (Tue)" if within the last week in moment.js
Handling of character references in an embedded SVG's script tags
Best way to read from a big CSV file without loading everything to memory using Javascript
Load region with C3.js
Why does jQuery's :visible selector work differently when filtered?
Javascript: Checking Surrounding Table Cells
Is it possible to write a JS function with no access to global variables?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!