Форум

javascript_pupil · #1 (**permalink**) 16.02.2012, 14:28

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

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

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

Ещё один дополнительный вопрос: в Safari 5.1.2 и Google Chrome, если задать меняющимся текстовым полям размер в процентах заведомо больший, чем может быть в таблице, но в сумме не более 100%, чтобы сдвинуть колонки с картинками до минимума, эти самые картинки вылезают за границы таблицы. Можно ли задать таблице минимальную ширину ячейки средствами CSS? HTML в случае с этими двумя браузерами не работает для решения проблемы минимальной/максимальной ширины.

poorking · #2 (**permalink**) 16.02.2012, 14:43

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

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

Pavel M. · #3 (**permalink**) 16.02.2012, 14:50

по поводу картинок в ячейках,
выставляйте размеры для ячеек

<!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>

javascript_pupil · #4 (**permalink**) 16.02.2012, 17:16

poorking,

display: block

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

Pavel M., а что означают эти "плюсы" в стилях? Это решение мне тоже не нравится тем, что указываются проценты у таблиц и ячеек. Для большого сайта - это весьма спорное решение.

Seva1986 · #5 (**permalink**) 16.02.2012, 20:57

Сообщение от javascript_pupil

Для большого сайта - это весьма спорное решение.

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

+ это слелектор сестринских элементов.

javascript_pupil · #6 (**permalink**) 17.02.2012, 22:15

Кстати, интересная деталь обнаружилась: несмотря на то, что везде написано, что браузеры на движке webkit не поддерживают min-width, они его поддерживают, только как-то по особенному:

<td width="1%" style="min-width: 16px"><span class="tool">....

работ� �ет, но если убрать его из TD и поместить в подключаемый файл таким образом:

span.tool {min-width: 16px}

то ничего не происходит, картинки в этих браузерах вылезают за границу таблицы.

poorking · #7 (**permalink**) 17.02.2012, 22:17

У вас селектор не соответствует тому TD

Pavel M. · #8 (**permalink**) 17.02.2012, 22:22

Сообщение от javascript_pupil

span.tool {min-width: 16px}

span это обычно inline элемент
ему нельзя задать размер
http://learn.javascript.ru/css-displ... %D0%B5-inline

javascript_pupil · #9 (**permalink**) 17.02.2012, 22:27

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

Не хотите давать нормальных ответов - не тратьте время своё и не разводите флуд.

javascript_pupil · #10 (**permalink**) 17.02.2012, 22:29

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

Форум

Справочник

Discord чат

Курсы javascript