Таблица Row SHOW/HIDE * Без * Изменение ширины столбца, w/TableLayout: auto

Question

У меня есть таблица с несколькими строками, показывающая элементы для продажи. Когда пользователь нажимает на строку, Javascript вставляет/показывает новую строку справа под ней с подробностями об элементе. Проблема заключается в том, когда описание длинное, оно заставляет ширину столбцов корректировать/изменять размер. Это сдвигает позиции столбцов и действительно раздражает, особенно для пользователя. Прямо сейчас у меня есть таблица table.style.tableLayout: auto. Я действительно предпочитаю это так, потому что столбцы настроены на контент.

Мой вопрос: как мне динамически «блокировать» ширины столбцов в моей таблице, чтобы при вставке/показе новой строки столбцы не корректировали/не изменяли размер?

Я пробовал:

1. динамической настройки таблицы временно "TableLayout: фиксированный"
2. вставки/показывая свою новую строку
3. изменяющуюся таблицу обратно "TableLayout: авто"

Действия 1 & 2 работает в FireFox, но не в Safari и IE (6 & 7). Тем не менее, делать все три, по-видимому, мешает слишком много сдвинуть столбцы.

Отчаяние невыносимо ... потерять много сна ... пожалуйста, помогите!

Спасибо.

Answer 1

Вы можете просмотреть подробную информацию о строке под щелкнул один в DIV и установить его

style="overflow:auto"; 

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

Answer 2

Я не знаю, если you're знакомы с JQuery, но that's то, что я хотел бы использовать - в сочетании с отдельным классом для столбца that's вызывая изменение размера в новой строки - до:

1. Рассчитать/получить с колонкой
2. Установите переключатель с из вышеупомянутого класса
3. Добавить строку

Я haven't пробовал, но это должно сделать это.

Кстати, есть, вероятно, другие способы сделать это, я больше знаком с jquery (для пунктов 1. и 2.).

Answer 3

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

Далее, я бы никогда не поместил css «white-space: nowrap» в любом месте на этом столе. Длинное описание не должно нарушать расположение таблицы, оно должно обертываться должным образом на нескольких строках и быть читаемым, если вы установите ширину для каждого столбца в соответствии с типом данных. Точно так же я бы продолжал использовать   (не разбивающиеся пространства) по датам, временам и числам и разрешать перенос текста.

Кроме этого, я делаю это на своей работе на основе набора, и есть время, когда вам нужно прекратить убирать волосы, прося браузер сделать что-то, что он не предназначен. Содержимое должно протекать и адаптироваться. Блокировка ширины столбцов в пикселях составляет 99,99999% времени, когда плохая идея.

PS: Если вы действительно, reeally, ДЕЙСТВИТЕЛЬНО нужно блокировать столбцы, единственное решение, которое я знаю о том, что работает с CSS2, и во всех браузерах - использовать изображения. Вы можете вставить в каждый столбец 1px высокое прозрачное изображение gif и подсчитывать заполнение ячеек (TD), установить ширину пикселя на каждое изображение (IMG), а не на столбцы (TH/TD). Например, вы можете скрыть их в TH. Вы можете оставить изображения шириной в 1 пиксель и установить процентную ширину на TD, а когда вы откроете новую строку, вы получите ширину столбца минус TD Padding и установите соответствующий IMG. Я не пробовал! Я просто знаю, что во многих проектах, над которыми я работал, я использовал небольшие изображения gif для блокировки минимального вертикального расстояния между столбцами, например.

Answer 4

Для тех, кто ищет код (это делается в jQuery). Это также предполагает, что первая строка имеет правильную ширину для каждой ячейки. При необходимости легко меняются.

$('table.class_of_table_to_fix tr:first td').each(function() { 
    $(this).css({'width': $(this).width()+"px"}); 
}); 

Answer 5

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

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

Вот сценарий, который использует JQuery:

(function($){ 

    var lock_widths = function() { 
     var total_width = $('table').innerWidth(); 
     var headers = $('table th'); 
     var leftover = 100; 

     $.each(headers, function(ix, el) { 
      var header = $(el), width; 

      // on the last call use the leftover percentage 
      if (ix == headers.length - 1) { 
       width = leftover; 
      } else { 
       leftover -= width = header.outerWidth()/total_width * 100; 
      } 

      header.css({'width': width + '%'}); 
     }); 
    }; 

    $(document).ready(lock_widths); 

})(jQuery); 

Испытано в IE7 +, Firefox и Chrome. Это работает для моего особого случая, потому что у меня есть столбцы заголовка в качестве ссылки, но его можно переписать для измерения некоторых других столбцов.