UX einer großen HTML-Tabelle (mit Bootstrap)

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

ich eine sehr breite Bootstrap-Tabelle (siehe Code-Schnipsel oben).

Ich möchte die folgenden Änderungen vorzunehmen:

die Breite Fix für alle Spalten identisch mit der Breite des längsten Kopf sein (derzeit jede Spalte wird länger progressiv)
Weiter haben horizontales Scrollen, aber partielle Spalten sollten nicht angezeigt werden.

Gibt es eine Möglichkeit zu segmentieren die Spalten, so dass sie n Spalten gleichzeitig gescrollt werden kann? Ich habe einige große Tische gesehen, die eine Kontrolle wie die unten haben. Im Idealfall möchte ich vermeiden, eine weitere JS-Abhängigkeit (z. B. Material) zu meinem Projekt hinzuzufügen.

Auch ist dies ein guter Weg, um die Tabelle auf mobile Geräte zu zeigen?

Quelle

2016-08-09 Jedi

Verwenden Sie die jumpScroll-Funktion, um Bildlaufpunkte zu erstellen und sie mit onClick-Ereignissen an Ihre Benutzeroberfläche anzubinden.

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

Quelle

2016-08-09 00:19:35

UX einer großen HTML-Tabelle (mit Bootstrap)

Antwort

Verwandte Themen