Как сделать размер ячейки в таблице не больше определённого значения?
Есть таблица в которой в нескольких первых колонках содержится текст, ширина которого может изменяться, а в нескольких следующих только пиктограммы фиксированного размера 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?
|
Цитата:
|
Цитата:
Если человек спрашивает, это нормально, но вы после того как вам ответили начали критиковать ответ, при этом аргументируя бредовым заявлением Цитата:
Соответственно критика от вас не уместна. Во вторых: Я дал нормальный ответ, на ваш вопрос Цитата:
Цитата:
Я задал вам вопрос Цитата:
В четвёртых: флуд разводите вы и вам подобные, которые ни хотят с элементарными вещами разобраться перед тем как флудить на форуме. Я например перед тем как на форуме спросить гуглю по несколько дней (так как стыдно задавать тупые вопросы на форумах) В пятых: моё ЧСВ тут не причём, читайте 4 пункт. и на последок ложка мёда в бочке дёгтя по поводу вашего вопроса Цитата:
Цитата:
возможно это исправят/исправили в css3 но до него пока далеко. |
Seva1986, меня не интересует в принципе CSS2+, а также IE6, 7 и даже 8. И мне абсолютно безразлично что об этом думают "гуру". Мне надо, чтобы работало в CSS3 и мне не нужны километры лишнего кода.
Все предложенные решения не были оптимальными ни по размеру кода, ни по техническому воплощению. Гораздо проще в конец таблицы добавить ещё одну строку и в нужные ячейки вставить прозрачный гиф размером 16 х 1px. Примерно в 100500 раз проще и надёжнее. Советы мне не обязаны нравится, я не бродячая собака, которой бросили кость. Нормальную работу я могу и оплатить, что кстати уже делал не раз и в этом форуме. А то прямо как в детском саду. |
Цитата:
Во первых вариант который вам предложил Pavel M. один из самых оптимальных. Cвязка css3 и гиф распорка это конечно сочно будет :haha: , ну да ладно... По поводу css3 http://www.w3.org/TR/2011/WD-css3-wr...odes-20110901/ если я не ошибаюсь там сказанно что min-height и и тд такие же как в 2.1 версии... Цитата:
Цитата:
Цитата:
А и кстати чего же вы на css3 остановились, уже 4 на подходе http://lea.verou.me/specs/conical-gradient/ http://www.w3.org/TR/2011/WD-selectors4-20110929/ да и html6 уже совсем близко http://blog.whatwg.org/html6-plan :lol: |
Pavel M., спасибо,
Код:
td {min-width: 16px}Seva1986, с вами даже спорить не интересно. Советую почитать свежие книги по вебдизайну известных авторов, перед тем, как умничать. Свежие - это конец 2011 года. ;) На русский их переведут через пару лет (может быть) и выпустят тиражом 500-2000 экземпляров на 150-миллионную страну. |
javascript_pupil,
не вы реально тупой или притворяетесь? чем ваш вариант лучше этого?
td {width: 16px}
Цитата:
Я вам из спеки инфу показал, какие ккниги каких авторов? Я кстати постоянно читаю чтото новое, только дело в том что почти все эти авторы этих крутых книг, толи не хотят всё писать толи знают вопрос хуже меня.... |
Цитата:
|
| Часовой пояс GMT +3, время: 05:29. |