Таблиця HTML: зберігайте однакову ширину для стовпців


77

У мене є таблиця з кількома групами стовпців. Таблиця більша за мою сторінку, тому у мене є елемент керування, який показує / приховує деякі з цих груп, щоб вони вмістилися на сторінці. Початкова таблиця виглядає добре: усі стовпці мають приблизно однакову ширину в межах групи. Але коли я приховую групу, стовпці вже не однакової ширини, і це виглядає погано.

Приклад: http://www.reviews-web-hosting.com/companies/apollohosting.html (недіюче посилання)

Поки що стіл виглядає нормально. Клацніть на >>. Перший стовпець у розділі "Електронна комерція Pro" набагато ширший, ніж інші стовпці у розділі "Електронна комерція Про", це виглядає дивно. Клацніть на <<, цього разу перший стовпець у розділі «Значення» занадто широкий. Принаймні у Firefox.

Я намагався використовувати

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

але не везе. Якщо я встановив col для style = "display: none", набір стовпців все одно відображається.

Будь-яка порада HTML / CSS, щоб зберегти стовпці однакової ширини в межах групи?

Редагувати:

  • щоб приховати стовпець, я повинен скористатися видимістю: згорнути
  • здається, зараз він добре змінює розмір, не знаю чому

Діалогове вікно автентифікації заважає мені користуватися сайтом.
Діодей - Джеймс Макфарлейн,

Це лише заважає мені бачити деякі зображення.
Iain M Norman

Це неправильний .htaccess, який просить автентифікацію, щоб отримати зображення під / сайти. Я виправлю це сьогодні ввечері. Я все ще працюю над створенням сайту.
Жюльєн

Відповіді:


198

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


11
Одна модифікація додавання table-layout: fixed;вирішила для мене ту саму проблему (FFox 11).
heltonbiker

11
який сенс використовувати макет таблиці виправленим, якщо потрібно встановити ширину комірки?
jokoon

21

надайте цей стиль td: width: 1%;


2
З невідомою кількістю стовпців це насправді робить фокус, якщо сама таблиця має фіксовану ширину абоwidth: 100%
Ларс Еберт

0

У вашому випадку, оскільки ви показуєте лише 3 стовпці:

Name    Value       Business
  or
Name    Business    Ecommerce Pro

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


5
Кількість комірок може змінитися, коли я приховую / показую різні стовпці
Жюльєн

0

ну, чому б вам (не позбутися бічної панелі і) не стиснути стіл, щоб він не мав ефекту show / hide? Зараз це мені здається дивним. Стіл занадто надійний.
Інакше я думаю, що пропозиція Сканліффа повинна це зробити. Або за бажанням ви можете просто встановити точну ширину таблиці та встановити відсоток або ширину пікселів для комірок таблиці.


Деякі таблиці занадто великі, подія без бічної панелі.
Жульєн
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.