Как скрыть строку HTML-таблицы , чтобы она не занимала места?
Они постоянно показываются / скрываются? Или когда они спрятаны, действительно ли они ушли навсегда? Потому что вы можете использовать javascript, чтобы просто удалить строку, и это, вероятно, решит вашу проблему.
Я хочу начать их как скрытые, а затем показать их, если пользователь нажимает кнопку, чтобы «показать больше». Когда они скрыты, я не хочу, чтобы они занимали вертикальное пространство.
У меня была такая же проблема, если вы удалите () строку с помощью javascript, она все равно займет некоторое место в IE6. no way around sucky IE
Какой тип документа вы используете? Я согласен с тем, что тот простой факт, что вы публикуете сообщение на SO с хорошим представителем, указывает на то, что вы, вероятно, знаете достаточно, чтобы избежать режима причуд . но единственный глупый вопрос — это тот, который не задают. . и, конечно, про волнистых попугаев.
Я действительно хотел бы увидеть стиль вашего ТАБЛИЦА. Например, «граница-коллапс»
Только предположение, но это может повлиять на то, как отображаются «скрытые» строки.
Можете ли вы включить код? Я style=»display:none;» все время добавляю в свою таблицу строки, и это эффективно скрывает всю строку.
как предотвратить изменение ширины таблицы, когда вы показываете скрытые строки, я не хочу фиксировать макет таблицы
Вы можете установить, а затем показать его с помощью JavaScript:
var result_style = document.getElementById('result_tr').style; result_style.display = 'table-row';это изменяет ширину таблицы, я делаю фильтр, в котором строки должны отображаться скрытыми в зависимости от того, что находится внутри окна поиска
Подумал, что я бы добавил к этому возможное другое решение:
Опять же, я нахожусь в чисто хромированной среде, поэтому я понятия не имею, как это работает в других браузерах.
Это работает в большинстве современных браузеров, за заметным исключением Safari, который отображает пробелы, а не скрывает строку: developer.mozilla.org/en-US/docs/Web/CSS/visibility
Если display: none; не работает, как насчет настройки height: 0; ? В сочетании с отрицательным полем (равным или превышающим высоту верхней и нижней границ, если таковые имеются) для дальнейшего удаления элемента? Не думаю, что position: absolute; top: 0; left: -4000px; это сработает, но, возможно, стоит попробовать.
С моей стороны, использование display: none работает нормально.
Добавьте некоторые из следующих значений: line-height: 0px; font-size: 0px; height: 0px; margin: 0; padding: 0;
Я забываю, кто это делает. Думаю, для IE6 это line-height.
У меня была такая же проблема, я даже добавил style = «display: none» в каждую ячейку.
В итоге я использовал HTML-комментарии
Вы можете использовать стиль display: none с tr, чтобы скрыть, и он будет работать со всеми браузерами.
var result_style = document.getElementById('result_tr').style; result_style.display = '';Это случилось со мной, и я был сбит с толку, почему. Затем я заметил, что если удалить какие-либо nbsp; у меня было внутри строк, значит, строки не занимали места.
Вам нужно поставить изменение типа ввода на скрытый, все его функции работают, но он не отображается на странице
пока установлен тип ввода, вы можете изменить остальные. Удачи!!
У меня была такая же проблема, и я решил ее. Ранее css был переполнен: скрытый; z-индекс: 999999;
Меняю его на overflow: visible;
type="checkbox" id="attraction" checked="checked" onchange="updateMap()">poi.attraction function updateMap() map.setOptions('styles': getStyles() >); > function getStyles() var styles = []; for (var i=0; i types.length; i++) var style = <>; var type = types[i]; var enabled = document.getElementById(type).checked; style['featureType'] = 'poi.' + type; style['elementType'] = 'labels'; style['stylers'] = ['visibility' : (enabled ? 'on' : 'off') >]; styles.push(style); > return styles; >position: absolute удалит его из потока макета и должен решить вашу проблему — элемент останется в DOM, но не повлияет на другие.
fwiw Я думаю, что это отличное решение, если вы хотите скрыть столбец в определенных ситуациях. в дополнение добавлю opacity: 0
Таблица данных со сворачиваемыми строками
Идея состоит в том, чтобы получить таблицу данных HTML tr , в которой есть несколько блоков ( группы или строки ), состояние которых можно изменять ( скрыть/показать ). Сначала я пытался сделать это на чистом CSS , но так и не смог найти способ, который бы действительно работал. Поэтому я решил использовать JQuery .
HTML структура
. Это будет применяться ко всем столбцам. Внутри этого тега мы добавим checkbox и label . Вскоре чекбокс будет скрыт с помощью CSS .
| Regian | Q1 2010 | Q2 2010 | Q3 2010 | Q4 2010 | $7,685.00 | $3,544.00 | $5,834.00 | $10,583.00 | $7,685.00 | $3,544.00 | $5,834.00 | $10,583.00 |
|---|
Как видите, чекбоксы имеют атрибут данных HTML5 — data-toggle=”toggle” , который мы затем используем в нашем JQuery для HTML table tr td , чтобы переключить контент под ним.
Стилизация
Мы создадим простой стиль и в конце скроем чекбокс. Ничего особенного:
table < width: 750px; border-collapse: collapse; margin:50px auto; >th < background: #3498db; color: white; font-weight: bold; >td, th < padding: 10px; border: 1px solid #ccc; text-align: left; font-size: 18px; >.labels tr td < background-color: #2cc16a; font-weight: bold; color: #fff; >.label tr td label < display: block; >[data-toggle=»toggle»]
Магия Jquery
Чтобы переключать ( скрыть /показать ) конкретные строки HTML table tr , нужно добавить JQuery , а также отдельные файлы ( в данном случае app.js ).
А в файле app.js будет следующий код:
Этот скрипт запускается каждый раз, когда изменяется состояние чекбокса. А так как строки по умолчанию отображаются, то если выбрать чекбокс, они скроются. Если снять отметку с чекбокса, они появятся снова и так далее.
В принципе все. У вас может быть столько блоков HTML tr , сколько нужно. Просто убедитесь, что используете разные id и имя для каждого чекбокса, чтобы они не конфликтовали между собой.
ВЛ Виктория Лебедева автор-переводчик статьи « Data Table with Collapsible Table Rows »
Пожалуйста, оставьте ваши отзывы по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, лайки, подписки!
Как скрыть/показать строку таблицы
Скрыть (показать) ячейку таблицы
Здравствуйте! Уже второй вечер не могу решить простую задачу: Нужно при определенном условии.
Как скрыть строку таблицы на 2 минуты
Как скрыть строку таблицы на 2 минуты в HTML
Как скрыть/показать 2 блока из инпута
Доброго времени суток уважаемые гуру)) Задача вот в чем есть такой код <!—ко всем атрибутам.
Как скрыть\показать часть блока
Для новостного сайта, на шаблон просмотра кратких новостей в категориях и на главной вместо.
table> tbody id="must_delete"> tr>td>DELETE. /td>/tr> /tbody> /table>
button onclick="document.getElementById('must_delete').style.display='none'">hiden/button> button onclick="document.getElementById('must_delete').style.display=''">show/button> table border=1> tr id="must_delete">td colspan=2>Строка должна исчезать/td>/tr> tr>td>Видно всегда/td>td>Видно всегда/td>/tr> /table>
Спасибо, да я что-то похожее сделал, но в FF все работает как надо, а в IE выдает выполнено с ошибками: «не удалось получить свойство display.Недопустимый аргумент», я так понял из-за значения .display=’table-row’, которого нет в IE..но если я его заменяю на », то в IE работает, а в FF не срабатывает colspan (вообще в таблице по 6 ячеек в строке) и все содержимое отображается в первой ячейке ..
table> . h4 style="cursor:hand; cursor:pointer" onclick="if(document.getElementById('sc1').style.display=='none') document.getElementById('sc1').style.display='table-row'; else document.getElementById('sc1').style.display='none';">Подробнее>>/h4> tr id="sc1" height=60> td colspan=6>size="2">b>Контактные данные:/b>. b>Дополнительные сведения:/b>/font>/td> /tr> . /table>