Ось і з'явилася чергова складна задача в реалізації призначеного для користувача інтерфейсу. Є таблиця. Спочатку 3 колонки. Але кількість колонок може бути більше. Ліва колонка фіксованої ширини, права колонка невідомої ширини і центральна колонка повинна займати все залишився.
Начебто нічого складного і за допомогою стандартної таблиці на html таку можна зробити за хвилину. Але, є додаткова умова. У середній колонці міститься текст і при стисканні вікна браузера (а він повинен бути в 1 рядок) починає обрізатися і з'являється три крапки.
За своєю природою таблиці не дозволяють обрізати вміст і завжди прагнуть відобразити його. Що робити? Є кілька шляхів вирішення проблеми. Давайте розберемо найбільш легкий і дієвий (з моєї точки зору).
Для початку створимо таблицю з трьома колонками. Задамо класи, напишемо вміст:
Текст другий колонки я не дарма обернув в 2 div-a. Але про це трохи пізніше. Переходимо до стилів:
Що ми робимо? Коротко: задаємо ширину першої і останньої клітинки (хоча вони можуть бути будь-якими, в тому числі динамічними), задаємо фонові кольори (для кращого візуального сприйняття прикладу), в загальному нічого цікавого. Розберемо найбільш цікавий шматок коду:
У першому випадку ми задаємо position: relative (щоб всі внутрішні елементи позиціонувалися щодо нього - можна задати це властивість і осередку, але Mozilla FireFox не вміє це робити з осередком), min-width: 43px; - мінімальну ширину (інакше осередок зовсім закриється), height: 20px; - висоту.
У другому випадку задаємо наступне: white-space: nowrap; - заборона перенесення рядків (наш текст повинен бути в 1 рядок), position: absolute; - абсолютно позиціюємося щодо свого батька (div), max-width: 100%; - максимальна ширина елемента (можна використовувати width), overflow: hidden; - приховувати інформацію, яку виходить за межі елемента, text-overflow: ellipsis; - додавати крапки до тексту.
Ось і все :) працює. Повний код сторінки: