Скрыть содержимое ячейки таблицы css
Вот и появилась очередная сложная задача в реализации пользовательского интерфейса. Имеется таблица. Изначально 3 колонки. Но количество колонок может быть больше. Левая колонка фиксированной ширины, правая колонка неизвестной ширины и центральная колонка должна занимать все оставшееся пространство.
Вроде бы ничего сложного и с помощью стандартной таблицы на html такую можно сделать за минуту. Но, есть дополнительное условие. В средней колонке содержится текст и при сжатии окна браузера (а он должен быть в 1 строку) начинает обрезаться и появляется многоточие...
По своей природе таблицы не позволяют обрезать содержимое и всегда стремятся отобразить его. Что делать? Есть несколько путей решения проблемы. Давайте разберем наиболее легкий и действенный (с моей точки зрения).
Для начала создадим таблицу с тремя колонками. Зададим классы, напишем содержимое:
<table> <tr> <td class="col1">Первая колонка</td> <td class="col2"><div><div>Вторая колонка с длинным названием</div></div></td> <td class="col3">Третья</td> </tr> </table>
Текст второй колонки я не зря обернул в 2 div-a. Но об этом чуть позже. Переходим к стилям:
table {width:100%;} table tr { height:20px; } .col1 { width:100px; background-color:red; } .col2 { background-color:yellow; } .col2>div { position:relative; min-width:43px; height:20px; } .col2>div>div { white-space:nowrap; position:absolute; max-width:100%; overflow:hidden; text-overflow:ellipsis; } .col3 { background-color:green; width:250px; }
Что мы делаем? Кратко: задаем ширину первой и последней ячейки (хотя они могут быть любыми, в том числе динамическими), задаем фоновые цвета (для лучшего визуального восприятия примера), в общем ничего интересного. Разберем наиболее интересный кусок кода:
.col2>div { position:relative; min-width:43px; height:20px; } .col2>div>div { white-space:nowrap; position:absolute; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
В первом случае мы задаем 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; - добавлять многоточие к тексту.
Вот и все:) работает. Полный код страницы:
<!doctype html> <html> <head> <style> table {width:100%;} table tr { height:20px; } .col1 { width:100px; background-color:red; } .col2 { background-color:yellow; } .col2>div { position:relative; min-width:43px; height:20px; } .col2>div>div { white-space:nowrap; position:absolute; max-width:100%; overflow:hidden; text-overflow:ellipsis; } .col3 { background-color:green; width:250px; } </style> </head> <body> <table> <tr> <td class="col1">Первая колонка</td> <td class="col2"><div><div>Вторая колонка с длинным названием</div></div></td> <td class="col3">Третья</td> </tr> </table> </body> </html>