<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="panel panel-default"> <div class="panel-heading">list of meaningless things</div> <div class="row"> <div class="col-xs-offset-1 col-xs-10 table-responsive"> <table id="course_groups" class="table table-striped table-bordered table-hover"> <thead class="thead-inverse"> <tr> <th>title</th> <th>created at</th> <th>1 <a href="#" data-toggle="tooltip" title="" data-original-title="1"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>2 <a href="#" data-toggle="tooltip" title="" data-original-title="2"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>4 <a href="#" data-toggle="tooltip" title="" data-original-title="4"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>8 <a href="#" data-toggle="tooltip" title="" data-original-title="8"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>16 <a href="#" data-toggle="tooltip" title="" data-original-title="16"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>32 <a href="#" data-toggle="tooltip" title="" data-original-title="32"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>64 <a href="#" data-toggle="tooltip" title="" data-original-title="64"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>128 <a href="#" data-toggle="tooltip" title="" data-original-title="128"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>256 <a href="#" data-toggle="tooltip" title="" data-original-title="256"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>512 <a href="#" data-toggle="tooltip" title="" data-original-title="512"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>1024 <a href="#" data-toggle="tooltip" title="" data-original-title="1024"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>2048 <a href="#" data-toggle="tooltip" title="" data-original-title="2048"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>4096 <a href="#" data-toggle="tooltip" title="" data-original-title="4096"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>8192 <a href="#" data-toggle="tooltip" title="" data-original-title="8192"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>16384 <a href="#" data-toggle="tooltip" title="" data-original-title="16384"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>32768 <a href="#" data-toggle="tooltip" title="" data-original-title="32768"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>65536 <a href="#" data-toggle="tooltip" title="" data-original-title="65536"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>131072 <a href="#" data-toggle="tooltip" title="" data-original-title="131072"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>262144 <a href="#" data-toggle="tooltip" title="" data-original-title="262144"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>524288 <a href="#" data-toggle="tooltip" title="" data-original-title="524288"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>1048576 <a href="#" data-toggle="tooltip" title="" data-original-title="1048576"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>2097152 <a href="#" data-toggle="tooltip" title="" data-original-title="2097152"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>4194304 <a href="#" data-toggle="tooltip" title="" data-original-title="4194304"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>8388608 <a href="#" data-toggle="tooltip" title="" data-original-title="8388608"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>16777216 <a href="#" data-toggle="tooltip" title="" data-original-title="16777216"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>33554432 <a href="#" data-toggle="tooltip" title="" data-original-title="33554432"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>67108864 <a href="#" data-toggle="tooltip" title="" data-original-title="67108864"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>134217728 <a href="#" data-toggle="tooltip" title="" data-original-title="134217728"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>268435456 <a href="#" data-toggle="tooltip" title="" data-original-title="268435456"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>536870912 <a href="#" data-toggle="tooltip" title="" data-original-title="536870912"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> <th>1073741824 <a href="#" data-toggle="tooltip" title="" data-original-title="1073741824"> <span class="glyphicon glyphicon-question-sign" /> </a> </th> </tr> </thead> <tbody> <tr> <td>bongo</td> <td>5th august 2016 17:47</td> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> <th>yes</th> </tr> <tr> <td>bingo</td> <td>5th august 2016 17:47</td> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> <th>no</th> </tr> </tbody> </table> </div> </div> </div>i have wide bootstrap table (see code snippet above).
i'd make following changes:
- fix width columns identical width of longest header (currently each column gets progressively longer)
- continue have horizontal scrolling, partial columns should not shown.
is there way segment columns can scrolled n columns @ time? i've seen wide tables have control 1 below. ideally, i'd avoid adding js dependency (e.g. material) project.
also, way show table on mobile devices?
try using jumpscroll function create scroll points , tie them ui onclick events.
function jumpscroll() { window.scroll(100,0); // horizontal , vertical scroll targets } 
Comments
Post a Comment