daninthemix daninthemix - 1 year ago 121
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">
<div id="table-scroll">
<table class="table table-bordered table-condensed">
<th>Date</th><th>From User</th><th>To User</th>
<th>From Location</th><th>To Location</th><th>By</th>
<?php foreach($history as $h){ ;?>
<?php } ;?>

This is the current CSS applied:

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

Answer Source

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{
#table-scroll th {
    text-align: center;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download