django-tables2: Add scroll bar to table

Question

I've created a table using django-tables2:

class MyTable(tables.Table):
    class Meta:
        model = TestModel
        attrs = {"class": "paleblue"}

In this table, I noticed that when any given cell contains too many characters, the column width will automatically expand. This can sometimes expand outside my browser's view-able area. I tried to add a scroll bar by modifying the default screen.css file provided by django-tables2 (added overflow: scroll):

table.paleblue + ul.pagination {
    background: white url(../img/pagination-bg.gif) left 180% repeat-x;
    overflow: scroll;
    margin: 0;
    padding: 10px;
    border: 1px solid #DDD;
    list-style: none;
}

Although this adds the scroll bar, the right-side of the scroll bar expands along with the table. Thus I cannot see the right-half of the scroll bar. Also, the scroll bar doesn't appear to be 'active' in that there is no 'bar' to click on.

What is the correct way to implement a scroll bar inside a django-tables2 table?

Answer 1

I found the solution after some trial and error. I had to modify the following entry in the django-tables2's default screen.css file:

div.table-container {
    display: inline-block;
    position:relative;
    overflow:auto;
}

I hope this solution is helpful to others.