html - Force horizontal table scrollbar -
i have table within modal popup. want table expand beyond container if necessary , give horizontal scrollbar. currently, doubles height of row if needs to:
i want horizontal behaviour same vertical behaviour (expand , provide scrollbar). php / html generating table:
<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 $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>
this current css applied:
#table-scroll { height: 150px; overflow: auto; } #table-scroll th { text-align: center; }
use white-space:nowrap
force text in 1 line , overflow data come in scroll.
#table-scroll { height: 150px; overflow: auto; } #table-scroll table{ white-space:nowrap; width:100%; } #table-scroll th { text-align: center; }
Comments
Post a Comment