Scroll left-to-right on HTML Table

Question

Is it possible for the user to scroll left and right in this table? Right now, no scrollbar appears and I miss data on the right hand side.

Demo:

https://jsfiddle.net/6wf0te1d/

Code:

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; overflow-x:hidden } 

 <div class="container" style="margin-top: 1rem;"> <div class="row"> <div class="generic__content col-xs-12 col-lg-12"> <style type="text/css"> .table tr td:first-child, .table thead tr td { font-weight:bold; } .table tbody tr td { border-right:1px solid black; } .table tbody tr td:last-child { border-right:0; } table tr td:nth-child(2), table tr td { text-align:center; } table img { height: 50px; display: block; text-align: center; margin: 0 auto; margin-bottom: 20px; } .zui-table { border: none; border-right: solid 1px #DDEFEF; border-collapse: separate; border-spacing: 0; font: normal 13px Arial, sans-serif; } .zui-table thead th { background-color: #DDEFEF; border: none; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .zui-table tbody td { border-bottom: solid 1px #DDEFEF; color: #333; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .zui-wrapper { position: relative; } .zui-scroller { margin-left: 141px; overflow-x: scroll; overflow-y: visible; padding-bottom: 5px; width: 100%; } .zui-table .zui-sticky-col { border-left: solid 1px #DDEFEF; border-right: solid 1px #DDEFEF; left: 0; position: absolute; top: auto; width: 140px; } </style> <!--<div style="overflow-x:auto;">--> <div class="zui-wrapper"> <div class="zui-scroller"> <table class="table table-striped zui-table"> <thead style="background:#FCE6E7"> <tr> <td style="padding:0!important">&nbsp;</td> <td><img src="coffee.svg">Cup of coffee</td> <td><img src="beer.svg">Local beer/lager</td> <td><img src="can-of.svg">Can of coca-cola</td> <td><img src="glass-wine.svg">Glass of wine</td> <td><img src="mineral-water.svg">Still mineral water</td> <td><img src="suncream.svg">Sun cream</td> <td><img src="insect.svg">Insect repellent</td> <td><img src="burger.svg">2 course lunch for 2</td> <td><img src="evening-meal.svg">3 course evening meal for 2</td> <td><img src="taxi.svg">Taxi ride</td> </tr> </thead> <tbody> <tr> <td class="zui-sticky-col">Bulgaria</td> <td>&pound;1</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Turkey</td> <td>&pound;2</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Portugal</td> <td>&pound;3</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Spain</td> <td>&pound;4</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Greece</td> <td>&pound;5</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Cyprus</td> <td>&pound;6</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Croatia</td> <td>&pound;7</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Malta</td> <td>&pound;8</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">France</td> <td>&pound;9</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Italy</td> <td>&pound;10</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> </tbody> </table> </div> </div> 

Answer 1

remove width:100% class .zui-scroller

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; overflow-x:hidden } 

 <div class="container" style="margin-top: 1rem;"> <div class="row"> <div class="generic__content col-xs-12 col-lg-12"> <style type="text/css"> .table tr td:first-child, .table thead tr td { font-weight:bold; } .table tbody tr td { border-right:1px solid black; } .table tbody tr td:last-child { border-right:0; } table tr td:nth-child(2), table tr td { text-align:center; } table img { height: 50px; display: block; text-align: center; margin: 0 auto; margin-bottom: 20px; } .zui-table { border: none; border-right: solid 1px #DDEFEF; border-collapse: separate; border-spacing: 0; font: normal 13px Arial, sans-serif; } .zui-table thead th { background-color: #DDEFEF; border: none; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .zui-table tbody td { border-bottom: solid 1px #DDEFEF; color: #333; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .zui-wrapper { position: relative; } .zui-scroller { margin-left: 141px; overflow-x: scroll; overflow-y: visible; padding-bottom: 5px; } .zui-table .zui-sticky-col { border-left: solid 1px #DDEFEF; border-right: solid 1px #DDEFEF; left: 0; position: absolute; top: auto; width: 140px; } </style> <!--<div style="overflow-x:auto;">--> <div class="zui-wrapper"> <div class="zui-scroller"> <table class="table table-striped zui-table"> <thead style="background:#FCE6E7"> <tr> <td style="padding:0!important">&nbsp;</td> <td><img src="coffee.svg">Cup of coffee</td> <td><img src="beer.svg">Local beer/lager</td> <td><img src="can-of.svg">Can of coca-cola</td> <td><img src="glass-wine.svg">Glass of wine</td> <td><img src="mineral-water.svg">Still mineral water</td> <td><img src="suncream.svg">Sun cream</td> <td><img src="insect.svg">Insect repellent</td> <td><img src="burger.svg">2 course lunch for 2</td> <td><img src="evening-meal.svg">3 course evening meal for 2</td> <td><img src="taxi.svg">Taxi ride</td> </tr> </thead> <tbody> <tr> <td class="zui-sticky-col">Bulgaria</td> <td>&pound;1</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Turkey</td> <td>&pound;2</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Portugal</td> <td>&pound;3</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Spain</td> <td>&pound;4</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Greece</td> <td>&pound;5</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Cyprus</td> <td>&pound;6</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Croatia</td> <td>&pound;7</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Malta</td> <td>&pound;8</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">France</td> <td>&pound;9</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> <tr> <td class="zui-sticky-col">Italy</td> <td>&pound;10</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> <td>&pound;</td> </tr> </tbody> </table> </div> </div> 

Answer 2

Do this:

table {
  width: 500px;
  overflow-x: scroll;
}

Answer 3

Add to you code:

.zui-wrapper {
   overflow-x: auto;
}

Remove from your code:

.zui-scroller {
   overflow-x: scroll;
   overflow-y: visible;
}

Answer 4

Your problem is here:

.zui-scroller {
      margin-left: 141px;
      overflow-x: scroll;
      overflow-y: visible;
      padding-bottom: 5px;
      width: 100%;
  }

change width: 100% to auto

.zui-scroller {
      margin-left: 141px;
      overflow-x: scroll;
      overflow-y: visible;
      padding-bottom: 5px;
      width: auto;
  }