У меня есть таблица с несколькими группами столбцов. Таблица больше, чем моя страница, поэтому у меня есть элемент управления, чтобы показать/скрыть некоторые из этих групп, чтобы они поместились на странице. Начальная таблица выглядит хорошо: все столбцы имеют одинаковую ширину внутри группы. Но когда я скрываю группу, столбцы больше не имеют одинаковой ширины, и это выглядит плохо.
Пример: http://www.reviews-web-hosting.com/companies/apollohosting.html (неработающая ссылка)
Пока таблица выглядит нормально. Нажмите → . Первый столбец в разделе "Электронная торговля" намного шире, чем другие столбцы в разделе "Электронная торговля", это выглядит странно. Нажмите "< <", на этот раз первый столбец в "Значение" слишком широк. По крайней мере, в Firefox.
Я пытался использовать
<colgroup><col /><col span="5" />...
но не повезло. Если я установил col в style = "display: none", набор столбцов все еще отображается.
Любой совет HTML/CSS для сохранения столбцов с одинаковой шириной с группой?
Edit:
Если вы установили стиль table-layout: fixed; в своей таблице, вы можете переопределить изменение размера столбца браузера. Затем браузер установит ширину столбцов в зависимости от ширины ячеек в первой строке таблицы. Измените <thead> на <caption> и удалите <td> внутри него, а затем установите фиксированную ширину для ячеек в <tbody>.
присвойте этому стилю значение td: width: 1%;
В вашем случае, поскольку вы показываете только три столбца:
Name Value Business
or
Name Business Ecommerce Pro
почему бы не установить для всех 3 ширину 33,3%. так как только 3 из них показываются сразу, браузер должен сделать их одинаковой шириной.
хорошо, почему бы вам (избавиться от боковой панели и) сжать стол, чтобы он не отображал/скрывал эффект? Теперь это выглядит странно. Таблица слишком надежная. В противном случае, я думаю, что это должно сделать предложение scunliffe. Или, если хотите, вы можете просто установить точную ширину таблицы и установить либо процентную, либо ширину пикселя для ячеек таблицы.