は、私が（上記のコードを参照してください）非常に広いブートストラップテーブルを持っている（ブートストラップを使用して）広いHTMLテーブルのUX

Question

<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>

を向上させます。

私は次の変更をしたいのですが：

1. 最長のヘッダの幅と同一であることがすべての列の幅を修正しました。（現在は各列は次第に長くなります）
2. は持ち続けます水平スクロールが可能ですが、部分列は表示しないでください。

彼らは一度にn個列をスクロールすることができるように、列セグメントに方法はありますか？私は、以下のようなコントロールを持つ広いテーブルをいくつか見てきました。理想的には、別のJS依存関係（例えばマテリアル）をプロジェクトに追加しないようにしたいと思います。

また、これは、モバイルデバイス上のテーブルを表示するには良い方法ですか？

Answer 1

jumpScroll関数を使用してスクロールポイントを作成し、それらをonClickイベントでUIに結びつけてみてください。

function jumpScroll() { 
    window.scroll(100,0); // horizontal and vertical scroll targets 
}