daninthemix daninthemix - 4 months ago 11
CSS Question

Force horizontal table scrollbar

I have a table within a modal popup. I want the table to expand beyond its container if necessary and give a horizontal scrollbar. Currently, it just doubles the height of the row if it needs to: enter image description here

I want the horizontal behaviour to be the same as the vertical behaviour (expand and provide scrollbar). This is the PHP / HTML generating the 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 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>


This is the current CSS applied:

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

Answer

Use white-space:nowrap to force it to get the text in one line only and then overflow data will come in scroll.

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