Мешаем проценты с пикселями

[john]

Есть таблица в 4 колонки.

В 1-й и 3-й - небольшие картинки, во 2-й и в 4-й - блоки текста.

Как сделать резиновую таблицу, если надо чтобы ячейки 1-й и 3-й колонок

были не шире размера картинки (не растягивались). Текстовые блоки должны

быть одинаковой ширины.

Спасибо.

[e1f]

<style type="text/css">
table { border:1px solid green; border-collapse:collapse;}
table td { border:1px solid green; padding: 0px; }
</style>
<table>
<tr>
<td style="width:1%;white-space:nowrap"><img src="..." /></td>
<td style="width:49%">bla bla bla bla bla bla</td>
<td style="width:1%;white-space:nowrap"><img src="..." /></td>
<td style="width:49%">bla bla bla bla bla bla</td>
</tr>
</table>

[Searcher]

если ширина таблицы больше 1000 пикселей, а колонка должна сохранять размер меньше 10 пикселей, то такое решение уже не подойдет

[e1f]

<style type="text/css">
table { border:1px solid green; border-collapse:collapse;}
table td { border:1px solid green; padding: 0px; }
</style>
<table width="100%">
<tr>
<td style="white-space:nowrap"><img src="..." width="1"/></td>
<td style="width:50%">bla bla bla bla bla bla</td>
<td style="white-space:nowrap"><img src="..." width="1"/></td>
<td style="width:50%">bla bla bla bla bla bla</td>
</tr>
</table>

А так?

[john]

...
<tr>
<td style="width:1%;white-space:nowrap"><img src="..." /></td>
<td style="width:49%">bla bla bla bla bla bla</td>
...

Огромное спасибо. Просто непонятно как я сам до 1/49 не додумался, а стал пикселя подставлять.

Чтобы окончательно закрепить материал - ещё вопрос А что в данном месте даёт white-space:nowrap ?

[Victor Ananiev]

слова не будут переносится)

[e1f]

Огромное спасибо. Просто непонятно как я сам до 1/49 не додумался, а стал пикселя подставлять.

Чтобы окончательно закрепить материал - ещё вопрос А что в данном месте даёт white-space:nowrap ?

Смотри коммент Searcher'а: надо не 1/49, а 0/50.

А white-space поставил по привычке, чтоб не сносило вниз а распирало. Но у тебя там рисунки, так что оно ничего не дает

[homm]

А правильный ответ был таким:

<table style='table-layout:fixed; width:100%;' border=1>
<col width='200'><col width='50%'><col width='50%'><col width='200'>
<tr>
<td>sdfsdf</td>
<td>dfgdfg</td>
<td>dfg</td>
<td>sdfsdf</td>
</tr>
</table>

[john]

А правильный ответ был таким:

<table style='table-layout:fixed; width:100%;' border=1>
<col width='200'><col width='50%'><col width='50%'><col width='200'>
<tr>
<td>sdfsdf</td>
<td>dfgdfg</td>
<td>dfg</td>
<td>sdfsdf</td>
</tr>
</table>

Если вместо текста поставить картинки согласно условия задачи - такая чепухня весёленькая получается...

Edited January 13, 2009 by john

[ZoNT]

Да Homm вообще весь весёлый