Таблица HTML: сохранить ту же ширину для столбцов

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

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

Пока таблица выглядит нормально. Нажмите → . Первый столбец в разделе "Электронная торговля" намного шире, чем другие столбцы в разделе "Электронная торговля", это выглядит странно. Нажмите "< <", на этот раз первый столбец в "Значение" слишком широк. По крайней мере, в Firefox.

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

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

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

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

Edit:

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

Ответ 1

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

Ответ 2

присвойте этому стилю значение td: width: 1%;

Ответ 3

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

Name    Value       Business
  or
Name    Business    Ecommerce Pro

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

Ответ 4

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