Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2012, 12:28
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 170

Как сделать размер ячейки в таблице не больше определённого значения?
Есть таблица в которой в нескольких первых колонках содержится текст, ширина которого может изменяться, а в нескольких следующих только пиктограммы фиксированного размера 16 х 16 пикселей. Их ширина не может меняться в принципе.

Все современные браузеры при выводе таблицы оставляют от этих картинок дополнительный, абсолютно ненужный отступ справа.

Вопрос: как средствами CSS можно указать браузеру максимальную ширину колонки?

Ещё один дополнительный вопрос: в Safari 5.1.2 и Google Chrome, если задать меняющимся текстовым полям размер в процентах заведомо больший, чем может быть в таблице, но в сумме не более 100%, чтобы сдвинуть колонки с картинками до минимума, эти самые картинки вылезают за границы таблицы. Можно ли задать таблице минимальную ширину ячейки средствами CSS? HTML в случае с этими двумя браузерами не работает для решения проблемы минимальной/максимальной ширины.
Ответить с цитированием
  #2 (permalink)  
Старый 16.02.2012, 12:43
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Сделайте img { display: block } отступ вроде пропасть должен

UPD
И вот еще "Непонятный отступ" снизу картинки, находящейся в блоке или ячейке. Классическая проблема
__________________
readOnly

Последний раз редактировалось poorking, 16.02.2012 в 12:45.
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2012, 12:50
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

по поводу картинок в ячейках,
выставляйте размеры для ячеек
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>

	table { width: 30%; border: 1px solid; margin: 1em 0; }
	table + table { width: 50%; }
	table + table + table { width: 70%; }

	td { padding: 0; border: 1px solid; }
	td + td + td { width: 50px; }

	td > img { display: block; }

</style>
</head>
<body>
  
	<table>
	 <tr>
	   <td>text</td>
	   <td>text</td>
	   <td><img src="http://placehold.it/50x50"></td>
	   <td><img src="http://placehold.it/50x50"></td>
	</tr>
	</table>

	<table>
	 <tr>
	   <td>text</td>
	   <td>text</td>
	   <td><img src="http://placehold.it/50x50"></td>
	   <td><img src="http://placehold.it/50x50"></td>
	</tr>
	</table>

	<table>
	 <tr>
	   <td>text</td>
	   <td>text</td>
	   <td><img src="http://placehold.it/50x50"></td>
	   <td><img src="http://placehold.it/50x50"></td>
	</tr>
	</table>
  
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 16.02.2012, 15:16
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 170

poorking,
display: block
наоборот, ещё и отступ сверху появился. Решение по ссылке к моему вопросу отношения не имеет.

Pavel M., а что означают эти "плюсы" в стилях? Это решение мне тоже не нравится тем, что указываются проценты у таблиц и ячеек. Для большого сайта - это весьма спорное решение.
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2012, 18:57
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Сообщение от javascript_pupil
Для большого сайта - это весьма спорное решение.
Не ну то что вы CSS совсем не знаете это понятно, но почему нельзя использовать проценты для ширины таблици в большом сайте? это кто запретил?

+ это слелектор сестринских элементов.
Ответить с цитированием
  #6 (permalink)  
Старый 17.02.2012, 20:15
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 170

Кстати, интересная деталь обнаружилась: несмотря на то, что везде написано, что браузеры на движке webkit не поддерживают min-width, они его поддерживают, только как-то по особенному:
<td width="1%" style="min-width: 16px"><span class="tool">....
работ ет, но если убрать его из TD и поместить в подключаемый файл таким образом:
span.tool {min-width: 16px}
то ничего не происходит, картинки в этих браузерах вылезают за границу таблицы.
Ответить с цитированием
  #7 (permalink)  
Старый 17.02.2012, 20:17
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

У вас селектор не соответствует тому TD
__________________
readOnly
Ответить с цитированием
  #8 (permalink)  
Старый 17.02.2012, 20:22
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от javascript_pupil
span.tool {min-width: 16px}
span это обычно inline элемент
ему нельзя задать размер
http://learn.javascript.ru/css-displ... %D0%B5-inline
Ответить с цитированием
  #9 (permalink)  
Старый 17.02.2012, 20:27
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 170

я вот фигею от таких ответов poorking и Seva1986. Вы так ЧСВ повышаете? Если человек спрашивает в форуме, значит он явно не знает, иначе зачем спрашивать? Ещё я не знаю китайский и урду и даже изучать их не планирую. И что дальше?

Не хотите давать нормальных ответов - не тратьте время своё и не разводите флуд.
Ответить с цитированием
  #10 (permalink)  
Старый 17.02.2012, 20:29
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 170

Pavel M., почему тогда работает пример, когда стиль прописан в самом теге TD?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 19:56
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 22:24
как сделать плавное затухание страницы magistr_bender Элементы интерфейса 1 18.03.2009 13:34
Как сделать справочное окно? Vlaimir Events/DOM/Window 13 05.01.2009 13:06
Размер ячейки использовать для определения размера рисунка art_em Общие вопросы Javascript 2 20.11.2008 10:27