Force horizontale Tabelle Bildlaufleiste

Question

Ich habe eine Tabelle in einem modalen Popup. Ich möchte, dass die Tabelle bei Bedarf über den Container hinaus erweitert wird und eine horizontale Bildlaufleiste gibt. Derzeit verdoppelt es nur die Höhe der Zeile, wenn es benötigt wird:

Ich möchte das horizontale Verhalten das gleiche wie das vertikale Verhalten (erweitern und Scrollbar bereitstellen). Dies ist die PHP/HTML die Tabelle zu erzeugen:

<div class="row"><div class="form-group col-md-12"> 
    <label>History:</label> 
    <div id="table-scroll"> 
     <table class="table table-bordered table-condensed"> 
     <thead> 
      <th>Date</th><th>From User</th><th>To User</th> 
      <th>From Location</th><th>To Location</th><th>By</th> 
     </thead> 
     <tbody> 
      <?php foreach($history as $h){ ;?> 
       <tr> 
        <td><?=$h['date'];?></td> 
        <td><?=$h['from_user'];?></td> 
        <td><?=$h['to_user'];?></td> 
        <td><?=$h['from_location'];?></td> 
        <td><?=$h['to_location'];?></td> 
        <td><?=$h['by_user'];?></td> 
       </tr> 
      <?php } ;?> 
     </tbody> 
     </table> 
    </div> 
</div></div> 

Dies ist die aktuelle CSS angewandt:

#table-scroll { 
    height: 150px; 
    overflow: auto; 
} 
#table-scroll th { 
    text-align: center; 
} 

Answer 1

Verwenden white-space:nowrap um es zu zwingen, den Text in einer Zeile nur zu bekommen und dann werden Überlaufdaten kommen in Bildlauf.

#table-scroll { 
    height: 150px; 
    overflow: auto; 
} 
#table-scroll table{ 
    white-space:nowrap; 
    width:100%; 
} 
#table-scroll th { 
    text-align: center; 
} 

Answer 2

Um die Tabellenfunktion zu machen, wie Sie es wollen - Sie müssen es in einer Tabelle ansprechenden Tag wickeln - das einen horizontalen Scrollbalken auf dem Tablett Größe Ansichtsfenster die Dokumentation -Check out erscheinen zwingen: http://getbootstrap.com/css/#tables-responsive

<div class='table-responsive'> 
     <table class="table table-bordered table-condensed"> 
     <thead> 
      <th>Date</th><th>From User</th><th>To User</th> 
      <th>From Location</th><th>To Location</th><th>By</th> 
     </thead> 
     <tbody> 
      <?php foreach($history as $h){ ;?> 
       <tr> 
        <td><?=$h['date'];?></td> 
        <td><?=$h['from_user'];?></td> 
        <td><?=$h['to_user'];?></td> 
        <td><?=$h['from_location'];?></td> 
        <td><?=$h['to_location'];?></td> 
        <td><?=$h['by_user'];?></td> 
       </tr> 
      <?php } ;?> 
     </tbody> 
     </table> 
</div> 

ich würde auch vorschlagen, dass Sie Ihr Design überdenken - jedes Design, das für eine große Menge an Inhalt (tabellarischen oder anderweitig) ruft in einem modalen angezeigt werden soll, wird die modale bitten, mehr zu tun, als es wirklich sein soll. Aber das ist nur meine Meinung.