Как задать overflow:hidden для ячеек таблицы

Часто возникает ситуация, когда в ячейке таблицы (td, th)  с фиксированной шириной находится текст, который либо растягивает либо разрывает ячейку.

[codesyntax lang=»html4strict» title=»HTML»]

<table width="50">
	<tr>
		<td>Очень длинный текст</td>
	</tr>
</table>

[/codesyntax]

В таком случае очень хочется поставить ей свойство overflow:hidden;

Но при обычных условиях ничего не изменится. Можно конечно вставить в ячейку блок, задать ему ширину и overflow:hidden, но добавление лишнего блока не самый красивый вариант + при большом количестве ячеек появляется слишком много лишнего кода.

[codesyntax lang=»html4strict» title=»HTML»]

<table width="50">
	<tr>
		<td>
			<div>Очень длинный текст</div>
		</td>
	</tr>
</table>

[/codesyntax]

[codesyntax lang=»css» title=»CSS»]

td div{
	width:50px;
	overflow:hidden;
}

[/codesyntax]

Выход оказался очень простой:

[codesyntax lang=»css» title=»CSS»]

table{
	table-layout: fixed;
}
table td{
	width:50px;
	overflow:hidden;
}

[/codesyntax]

Для справки:

CSS свойство table-layout определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом. Может принимать следующие значения:

auto Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
inherit Наследует значение родителя.
Запись опубликована в рубрике HTML/CSS с метками , , , . Добавьте в закладки постоянную ссылку.

Один комментарий: Как задать overflow:hidden для ячеек таблицы

  1. Спасибо! Как раз то, что надо)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *