Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.10.2011, 11:26
Аспирант
Отправить личное сообщение для debugx Посмотреть профиль Найти все сообщения от debugx
 
Регистрация: 24.05.2011
Сообщений: 40

Максимальная ширина строки в таблице
Всем привет,
Есть таблица (<table style="width:100%;">) из нескольких колонок. В одной из колонок помещается текст, который может быть достаточно длинным. И сейчас из-за этого таблицу распирает за пределы родительского контейнера. Я задал свойства "overflow: hidden;white-space: nowrap;", чтобы текст обрезался. Но это не помогло, таблицу все-равно распирает
Каким образом это дело можно сверстать так, чтобы таблицу не распирало за пределы родительского контейнера?
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2011, 11:38
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Сообщение от debugx
Я задал свойства "overflow: hidden;white-space: nowrap;"
каким элементам?

Возможно будет полезно погуглить по "&shy; wbr html" .
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2011, 12:02
Аспирант
Отправить личное сообщение для debugx Посмотреть профиль Найти все сообщения от debugx
 
Регистрация: 24.05.2011
Сообщений: 40

Сообщение от Riim Посмотреть сообщение
каким элементам?
диву внутри <td></td>, в котором и лежит текст произвольной длины
Ответить с цитированием
  #4 (permalink)  
Старый 15.10.2011, 12:46
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Сообщение от debugx
диву внутри <td></td>, в котором и лежит текст произвольной длины
наверное, не указана ширина. "overflow: hidden" работает по ширине, только когда она точно задана (или как-то родителем ограничена). С высотой то же самое. Можно еще с max-width что-нибудь попробовать.

Последний раз редактировалось Riim, 15.10.2011 в 12:48.
Ответить с цитированием
  #5 (permalink)  
Старый 15.10.2011, 13:06
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

debugx,


Ту не так нужно это нифига не даёт таблицы это особенный зверь....


Таблицу распирает неразрывная последовательность....

есть два варианта с лишним дивом

<!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">
<head>
<title>тест</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
	body{
	width:1000px;
	}
	table{
	width:100%;
	}
	table td{
	border:1px solid red;
	}
	table div{
	width:100px;
	word-wrap:break-word;
	}
  </style>
 </head>
 <body>
  <table>
	<tr>
		<td><div>afadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafaafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfdfafadfafadfafadf</div></td>
		<td>afadf</td>
		<td>afadf</td>
		<td>afadf</td>
	</tr>
  </table>
  
 </body>
</html>


второй вариант без дива

<!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">
<head>
<title>тест</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
	body{
	width:1000px;
	}
	table{
	width:100%;
	table-layout:fixed;
	}
	table td{
	border:1px solid red;
	word-wrap:break-word;
	}
  </style>
 </head>
 <body>
  <table>
	<tr>
		<td>afadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafaafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfdfafadfafadfafadf</td>
		<td>afadf</td>
		<td>afadf</td>
		<td>afadf</td>
	</tr>
  </table>
  
 </body>
</html>

Последний раз редактировалось Seva1986, 15.10.2011 в 13:10.
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2011, 13:08
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Кстати смотря на страницу это форума после вставки моего кода с неразрывной последовательностью видно что сдесь сделать это бы не помешало тоже....

Последний раз редактировалось Seva1986, 15.10.2011 в 13:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение строки в таблице posta ExtJS 5 23.06.2011 12:31
Помогите с калькулятором piton1175 AJAX и COMET 0 16.06.2011 14:29
Отфильтровать строки в таблице по заданным критериям Hag1989 Общие вопросы Javascript 0 03.12.2009 02:06
Строки в таблице Gufer Элементы интерфейса 3 28.06.2009 01:53
Подсветка выделенной строки в таблице (row table highlight) artsage Элементы интерфейса 4 03.04.2009 06:40