Скрыть содержимое ячейки таблицы css

Скрыть содержимое ячейки таблицы 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>

27.03.17
Для просмотра сайта обновите браузер.