Подходит - клиент хочет, чтобы ширина столбца оставалась постоянной между страницами

Question

Когда у вас есть несколько страниц данных в Footable, ширина столбца изменяется по мере того, как вы просматриваете данные, в зависимости от того, что появляется в каждом столбце в любой момент времени. Это уродливо.

Я думаю, что запрос моего клиента означает, что у меня не будет гибких таблиц, но, возможно, есть выход из этого, чего я не вижу.

Подходящие ручки для разбивки на страницы на стороне клиента. Технически, должно быть возможно «заблокировать» ширину столбца с первой страницы и заставить ее оставаться неизменной во всех данных. Я не думаю, что Footable имеет этот вариант.

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

This jsfiddle иллюстрирует проблему (jsFiddle CSS мешает моему немного, потому что он имеет Footable классы, тоже).

Я могу указать ширину столбцов в% - это работает, даже если столбец скрыт, поскольку сглаживание видового экрана сокращается.

У кого-нибудь есть другое/лучшее предложение?

Answer 1

Я не могу воспроизвести вашу проблему, и jsfiddle не подкачивает почву.

Тем не менее, у меня была аналогичная проблема с шириной столбца, когда я генерировал содержимое таблицы после вызова AJAX. Решение, которое я нашел, это применить класс к каждой ячейке в столбце nTH, а затем определить ширину min = width max.

Я добавил класс в тему заголовка и определить CSS для этого столбца ...

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