Потрібно зробити так, щоб картинка автоматично масштабувати в осередку, тобто кожна клітинка займала 1/3 таблиці (20% екрану) і, якщо картинка в осередок не поміщається, вона масштабується під її розмір.
table border-collapse: collapse;
border-spacing: 0;
width: 60%;
height: auto;
padding-left: 5pt;
margin: auto;
>
|
|
|
У Firefox'е працює як треба, а ось в IE не хоче. Таблиця розповзається і виходить за межі екрану.
спробуйте для кожного осередку прописати ширину (
. | ) І до речі в ИЕ якому не хоче? наскільки я пам'ятаю (якщо не помиляюся), border-spacing працює тільки старше 8 версії, а border-collapse в шостий що то глючить)
Firefox 13 і IE 9.
Якщо виставити width = 20% у кожного осередку, то перестає масштабувати навіть в Firefox'е.
Якщо спробувати виставити у кожної картинки width = 20%, то виходить, що він виставляє розмір, рівний 20% від розміру кожного осередку, т. Е. 4% від розміру екрана.
Взагалі, здається я зрозумів, в чому криється проблема - IE спершу завантажує картинки, тобто розмір таблиці збільшується, а потім вже фіксує її. Я виставив width = 20% і вийшла величезна таблиця з маленькими картинками в кожному осередку.
Firefox ж спершу малює таблицю, фіксує її розмір, а потім вже вставляє в її осередки картинки.
для картинки треба 100% - у неї йде розмір у відсотках від батьківського елемента
як варіант можна на js або css3 (media queries) робити: в залежності від розміру екрана розмір таблиці встановлювати