Как сделать размер ячейки в таблице не больше определённого значения?
Есть таблица в которой в нескольких первых колонках содержится текст, ширина которого может изменяться, а в нескольких следующих только пиктограммы фиксированного размера 16 х 16 пикселей. Их ширина не может меняться в принципе.
Все современные браузеры при выводе таблицы оставляют от этих картинок дополнительный, абсолютно ненужный отступ справа. Вопрос: как средствами CSS можно указать браузеру максимальную ширину колонки? Ещё один дополнительный вопрос: в Safari 5.1.2 и Google Chrome, если задать меняющимся текстовым полям размер в процентах заведомо больший, чем может быть в таблице, но в сумме не более 100%, чтобы сдвинуть колонки с картинками до минимума, эти самые картинки вылезают за границы таблицы. Можно ли задать таблице минимальную ширину ячейки средствами CSS? HTML в случае с этими двумя браузерами не работает для решения проблемы минимальной/максимальной ширины. |
Сделайте img { display: block } отступ вроде пропасть должен
UPD И вот еще "Непонятный отступ" снизу картинки, находящейся в блоке или ячейке. Классическая проблема |
по поводу картинок в ячейках,
выставляйте размеры для ячеек
<!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>
|
poorking,
display: blockнаоборот, ещё и отступ сверху появился. Решение по ссылке к моему вопросу отношения не имеет. Pavel M., а что означают эти "плюсы" в стилях? Это решение мне тоже не нравится тем, что указываются проценты у таблиц и ячеек. Для большого сайта - это весьма спорное решение. |
Цитата:
+ это слелектор сестринских элементов. |
Кстати, интересная деталь обнаружилась: несмотря на то, что везде написано, что браузеры на движке webkit не поддерживают min-width, они его поддерживают, только как-то по особенному:
<td width="1%" style="min-width: 16px"><span class="tool">....работ ет, но если убрать его из TD и поместить в подключаемый файл таким образом:
span.tool {min-width: 16px}
то ничего не происходит, картинки в этих браузерах вылезают за границу таблицы. |
У вас селектор не соответствует тому TD
|
Цитата:
ему нельзя задать размер http://learn.javascript.ru/css-displ... %D0%B5-inline |
я вот фигею от таких ответов poorking и Seva1986. Вы так ЧСВ повышаете? Если человек спрашивает в форуме, значит он явно не знает, иначе зачем спрашивать? Ещё я не знаю китайский и урду и даже изучать их не планирую. И что дальше?
Не хотите давать нормальных ответов - не тратьте время своё и не разводите флуд. |
Pavel M., почему тогда работает пример, когда стиль прописан в самом теге TD?
|
| Часовой пояс GMT +3, время: 21:05. |