Свойство ширины таблицы HTML со скрытыми или свернутыми столбцами с тегами мультимедиа CSS

Question

Я использую теги @media в моем css-файле, чтобы скрыть столбцы в моей таблице, когда ширина моего экрана становится меньше определенного значения.

Моя таблица настроена следующим образом.

<table>
<colspan id="col1">
<colspan id="col2">
<colspan id="col3">
<thead>
......

И скрытие происходит в файле CSS следующим образом

@media only screen and max-width: 500px) {

#col1 { visibility:collapsed ; }

}

Скрытие столбца работает нормально, моя проблема в том, что у меня установлено свойство ширины таблицы, равное 100%, или его родительский элемент.Проблема в том, что таблица со скрытым столбцом наследует правильную ширину, она ведет себя так, как будто свернутый / скрытый столбец все еще там, поэтому я просто получаю пробел справа от моей таблицы.

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

Для справки я тестирую эту страницу в IE9.

Заранее благодарен за любую помощь.

Answer 1

Видимость влияет только на то, отображается ли содержимое элемента или нет, например, visibility:hidden скрывает содержимое узла, но не пространство, которое оно займет.Попробуйте display: none, чтобы скрыть как содержимое, так и место, которое оно займет.