Длинные слова растягивают td

prowoke · March 28, 2011

Здравствуйте. Вот сейчас увидел, что длинные слова растягивают колонку в таблице и им безралично задаю ли я фиксированную ширину или нет. Порылся на сайте, порылся в гугле, толково совета так и не нашёл и как я понимаю самого правильного решения это проблемы не существуют. Вот моя таблица:


<table border="1px solid black" width="100%">
					<tr>				
<td colspan="2"></td>

	<td>Тут будет <img src="" weith="120px" height="150px" /></td>
	<td class="cert_description">очень Длинюююююююююююююююююююююююююююююююююююююююююююююююююююююююююююююююююююююююющеееееее</td>

					</tr>

Я вообще хочу сделать стандартный раздел с сертификатами строительной компании. Ну там название его, минифото, и описание. Так вот как проблему то решить? Или невозможно сделать 2 колонки фиксированной величины? Я так понимаю грамотного переноса строк пока ещё нет или как?

Edited March 29, 2011 by prowoke

tius · March 29, 2011

Топором: .cert_description{overflow: hidden;}

Топором 2: .cert_description{white-space: pre-wrap;}

"Наразрывный" контент всегда будет растягивать родительский элемент.

Edited March 29, 2011 by tius

Great Rash · March 29, 2011

table {
   table-layout: fixed;
}

psywalker · March 29, 2011

table {
   table-layout: fixed;
}

Да, но если я не ошибаюсь, то в таком случае содержимое может вылезти за пределы ячейки.

Great Rash · March 29, 2011

Попутно нужно указать overflow: hidden; конечно...

psywalker · March 29, 2011

Попутно нужно указать overflow: hidden; конечно...

Да, точняк

prowoke · March 29, 2011

Чёт не пойму. Ни один из приведённых советов не работает. Вот один из примеров:


<style type="text/css">
.main_table {
	table-layout: fixed;	
}
.img {
	width: 300px;
}
.cert_description {
	overflow: hidden;
	width: 200px;
}
.bigtd {
	width: 500px;
}
</style>
<table class="main_table" border="1px solid black">
	<tr>
		<td class="bigtd" colspan="2"> zfsadf</td>
	</tr>

	<tr>                            
		<td class="img">Тут будет <img src="" weith="120px" height="150px" /></td>
		<td class="cert_description">оченьоченьоченьоченьоченьоченьоченьоченьоченьоченьоченьочень</td>                           
	</tr>
</table>

Edited March 29, 2011 by prowoke

tius · March 30, 2011

.cert_description {display:block;}

Great Rash · March 30, 2011

Чет я не уверен, что display: block; для ячейки таблицы - хорошая идея...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>

	<style type="text/css">
		* {margin: 0; padding: 0;}
		table {width: 100%; table-layout: fixed;}
		table td {border: 1px solid; padding: 3px 5px;}
		table div {overflow: hidden;}
	</style>
</head>
<body>

	<table>
		<tbody>
			<tr>
				<td>text</td>
				<td>text</td>
				<td>
					<div>texttexttetetetekjn;kjhfsdsdfiugijhbdso9tfa['okhdsapuyfsdaphijgd;sfakjhdspiu</div>
				</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

prowoke · March 30, 2011

Хмм, ну я понял. Но, наверное, не совсем то, что я хотел. Ведь при таком коде, нельзя задать отдельно ширину столбца фиксированную, если у table width: 100%;

А если table задавать опр размера, то получается тоже не совсем то. Хотя это, конечно, не критично. Или возможно я не понял как этим пользоваться. Вот ссылка на то, что я хочу сделать http://deluxe-okna.ru/certificate/index.php . Там вот сертификаты расположенны друг за дружкой, а если их нечётное количество, как в моём примере(5), то он занимает половину контента, а не растягивается на весь. Вот мне так нужно было по идеи, но чтобы они ещё и равны были, и также не растягивались. Вот с помощью твоего примера такое разве можно сделать? Заранее извиняюсь, если туплю и просто не понял как это применить.

psywalker · March 30, 2011

Хмм, ну я понял. Но, наверное, не совсем то, что я хотел. Ведь при таком коде, нельзя задать отдельно ширину столбца фиксированную, если у table width: 100%;
А если table задавать опр размера, то получается тоже не совсем то. Хотя это, конечно, не критично. Или возможно я не понял как этим пользоваться. Вот ссылка на то, что я хочу сделать http://deluxe-okna.ru/certificate/index.php . Там вот сертификаты расположенны друг за дружкой, а если их нечётное количество, как в моём примере(5), то он занимает половину контента, а не растягивается на весь. Вот мне так нужно было по идеи, но чтобы они ещё и равны были, и также не растягивались. Вот с помощью твоего примера такое разве можно сделать? Заранее извиняюсь, если туплю и просто не понял как это применить.

Дело в том, что одна строка не может быть короче или длинее другой. Т.е. ячейки подстраиваться тогда своей шириной под размеры таблицы.

Great Rash · March 30, 2011

То что вы хотите сделать решается без таблиц. Мысли выражать надо яснее...

ЧаВо

Sign In

Длинные слова растягивают td

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information