Footable - client wants column width to remain constant between pages

Question

When you have multiple pages of data in a Footable, the column width changes as you page through the data, depending on what appears in each column at any given time. This is ugly.

I think my client's request means I will not have responsive tables, but maybe there is way out of this that I don't see.

Footable handles pagination client-side. Technically, it should be possible to "lock" the column width from the first page and force it to remain the same throughout the data. I don't think Footable has this option, though.

$(function () {
    $('.footable').footable();
});

This jsfiddle illustrates the issue (the jsFiddle CSS interferes with mine a bit because it has Footable classes, too).

I could specify the width of the columns in % - that seems to work even when column are hidden as the viewport shrinks.

Does anyone have another/better suggestion?

Answer 1

I am not able to reproduce your problem and the jsfiddle is not paging the footable.

Still, I had a similar problem with column width when I generated the table content after an AJAX call. The solution I found was to apply a class to every cell in the nTH column and then define the width = max-width min-width.

I've added a class to your subject header and defined css for this column ...

http://jsfiddle.net/bgil2012/gHsdE/

<table class="footable" data-page-size="5">
    <thead>
        <tr>
            <th data-toggle="true">Product</th>
            <th data-hide="phone">Study Id</th>
            <th class="study-title" data-hide="phone">Study Title</th>
            <th class="column_condition" >Condition</th>
            <th>Results</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tysabri</td>
            <td>001-06-NAT</td>
            <td class="study-title">ENER-G Tysabri fatigue and cognition</td>
            <td class="column_condition" >Multiple Sclerosis</td>
            <td>CSR Synopsis</a>
            </td>
        </tr>

CSS:

.study-title {
    max-width: 20px;
    min-width: 20px;
    width: 20px;
}