html - Bootstrap responsive table with horizonascroll -
i using bootstrap 3 responsive-table
hundred columns. since number of columns many, not fit computer screen.
according bootstrap documentation on responsive tables, device/screen 768px wide or less have horizontal scroll bar these tables , rest not.
is there way make scroll work on laptop/desktop screens?
you can override way bootstrap styles table-responsive
class imitating own css. resolutions lower 768px, bootstrap has following style applied:
/* bootstrap.css */ @media screen , (max-width: 767px) { ... .table-responsive { width: 100%; margin-bottom: 15px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; } }
therefore, if want same behaviour apply on resolutions larger 768px, can duplicate in own styling:
/* css */ .table-responsive { width: 100%; margin-bottom: 15px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; }
Comments
Post a Comment