Строка таблицы ПОКАЗАТЬ / СКРЫТЬ * Без * Изменение ширины столбца, с табличным расположением: авто

Question

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

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

1. динамически устанавливая таблицу временно «tableLayout: fixed»
2. вставка / показ моей новой строки
3. изменение таблицы обратно на "tableLayout: auto"

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

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

Спасибо.

Answer 1

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

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

Answer 2

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

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

Вот скрипт, который использует 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. Это работает для моего особого случая, потому что у меня есть столбцы заголовка в качестве ссылки, но его можно переписать, чтобы измерить некоторые другие столбцы.

Answer 3

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

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

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

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

Answer 4

Я не знаю, знакомы ли вы с jquery, но это то, что я бы использовал - в сочетании с отдельным классом для столбца, который вызывает изменение размера в новой строке - до:

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

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

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

Answer 5

Вы можете отобразить детали строки под выбранной в DIV и установить ее

style="overflow:auto";

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