table-layout: фиксированный игнорирует td min-width
У меня есть проект, который требует таблицы, которая включает столбцы с фиксированной шириной и шириной.
Некоторые из столбцов должны быть шириной 80 пикселей в ширину, независимо от ширины браузера.
Остальные столбцы должны быть гибкой ширины, но все они должны быть одинаковой ширины, с минимальной шириной 75 пикселей;
Добавляя таблицу-макет: исправлено; к таблице я могу получить гибкие столбцы ширины для всех, имеющих равную ширину, но тогда таблица игнорирует атрибут min-width td.
Если я удалю таблицу-макет: исправлено, минимальная ширина работает, но гибкая ширина cols имеет разную ширину (в зависимости от длины текста, который они содержат).
Количество столбцов зависит от данных, выведенных из db.
Я привел пример таблицы с табличным макетом: fixed и min-width на jsfiddle: http://jsfiddle.net/7d2Uj/
Любые идеи, как заставить min-width работать в этой ситуации или почему это происходит?
Ответы
Ответ 1
Вы должны использовать width
, а не min-width
для столбцов фиксированной ширины, и вы должны установить ширину оставшихся столбцов в процентах в зависимости от количества столбцов. В вашем случае у вас было 6 столбцов, поэтому я установил 16.66%
.
Рабочий пример: http://jsfiddle.net/6vw66/
Ответ 2
Мое обходное решение для этого заключалось в том, чтобы сжать таблицу туда, где столбцы почти перекрываются, проверить ширину таблицы в этой точке и установить минимальную ширину самого элемента <table>
для этого значения. Этот метод также полезен, если у вас есть фиксированный макет с одним расширяемым столбцом, потому что в противном случае расширяющийся столбец полностью исчезнет при смене окна.
Пример: http://jsfiddle.net/KTCfs/