Geek Answers Handbook

How can I move the scroll bar from inside to outside the table?

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

"Live long and prosper"

From this

enter image description here

To that 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>
+8
javascript jquery css
source share
1 answer

This provides the right effect for me:

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

However, he suggests that the 16px scrollbar 16px wide, which may vary between browsers.

+3
source share

More articles:


All Articles