HTML таблица: оставьте одинаковую ширину для столбцов

Question

У меня есть таблица с несколькими группами столбцов. Таблица больше моей страницы, поэтому у меня есть элемент управления, чтобы показать / скрыть некоторые из этих групп, чтобы они поместились на странице. Исходная таблица выглядит хорошо: все столбцы в группе имеют примерно одинаковую ширину. Но когда я скрываю группу, столбцы уже не имеют одинаковую ширину, и это выглядит плохо.

Пример: http://www.reviews -web-hosting.com / companies / apollohosting.html (неработающая ссылка)

Пока таблица выглядит хорошо. Нажмите на >>. Первый столбец в разделе «Ecommerce Pro» гораздо шире других столбцов в разделе «Ecommerce Pro», выглядит странно. Нажмите <<, на этот раз первый столбец в поле «Значение» слишком широкий. По крайней мере, в Firefox. </p>

Я пытался использовать

<colgroup><col /><col span="5" />...

но не повезло. Если для столбца установлено значение style = "display: none", набор столбцов по-прежнему отображается.

Какой-нибудь совет по HTML / CSS для сохранения одинаковой ширины столбцов в группе?

Edit:

• чтобы скрыть столбец, я должен использовать видимость: collapse
• похоже, что сейчас он хорошо меняется, я не знаю, почему

Answer 1

Если вы установите стиль table-layout: fixed; на своей таблице, вы можете переопределить автоматическое изменение размера столбца в браузере. Затем браузер установит ширину столбцов в зависимости от ширины ячеек в первой строке таблицы. Измените <thead> на <caption> и удалите <td> внутри него, а затем установите фиксированную ширину для ячеек в <tbody>.

Answer 2

присвоить этот стиль тд: ширина: 1%;

Answer 3

ну, почему бы вам (избавиться от боковой панели и) не сжать стол, чтобы он был без эффекта показать / скрыть? Это выглядит странно для меня сейчас. Стол слишком крепкий.
В противном случае я думаю, что предложение Скунлиффа должно сделать это. Или, если хотите, вы можете просто установить точную ширину таблицы и установить процент или ширину пикселя для ячеек таблицы.

Answer 4

В вашем случае, поскольку вы показываете только 3 столбца:

Name    Value       Business
  or
Name    Business    Ecommerce Pro

почему бы не установить все 3 на ширину 33,3%. поскольку только 3 отображаются одновременно, браузер должен отобразить их одинаковую ширину.