Footable - client wants column width to remain constant between pages - pagination

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;
}