Question

Сколько лет встречаюсь с HTML и CSS не могу понять некоторые "тонкости". Вот есть таблица в ворд, я её копирую на сайт, вставляю в визуальный редактор, там всё хорошо и славно, сохраняю страницу и первый столбец "урезается" сжимая картинку. В чём проблема?

Answer 1

В стили пропишите:

[id="content"] td img { max-width: 100%!important; height: auto!important; }

Comments

Зашёл в общий файл css, вставил, без изменений

---

Данил663,

Какой общий? Вставить нужно сюда http://museumania.do.am/panel/?a=tmpl;m=3;t=3 там вы ничего не добавили. После добавления кеш в браузере чистите https://ukit.com/ru/help/kak-ochistit-cahe если не почистите то и изменений не увидите.

---

Yuri_Geruk,

Так это поправил, но теперь картинки маленькие(хотя в визуальном редакторе всё выставил), как просто напросто увеличить ширину столбца, а то другие забирают себе львиную долю, попутно уменьшая картинки.

---

Данил663,

Стили выше замените на такие:

[id="content"] td img {max-width: 120px!important;}

и еще, ширину у таблиц задавайте не фиксированную как вы делаете^

style="border-collapse:collapse;width:700px;" 

задавать нужно 100% чтобы в итоге ваши таблицы были адаптивными и не ломали дизайн сайта.

---

Yuri_Geruk,

Теперь всё ещё лучше, но как сузить другие столбцы, тем самым предотвратить "поломку" дизайна на странице, как сейчас?

---

Данил663,

Меньше бы вы мусора использовали при оформлении таблицы, проблем никаких бы не было, вот очистил вашу таблицу от хлама и ненужного мусора, замените код таблицы с страницы http://museumania.do.am/index/nashi_partnery/0-19 на:

 

<table align="center" border="1" style="border-collapse:collapse;width:100%;">

<tbody>

<tr>

<td>

<p><img alt="" src="http://museumania.do.am/image/1.png" /></p>

</td>

<td>

<p align="center"><span>Гродненский государственный историко-археологический музей</span></p>

</td>

<td>

<p align="center"><a href="http://www.museum-grodno.by"><span>http://www.museum-grodno.by</span></a></p>

</td>

</tr>

<tr>

<td>

<p><img alt="" src="http://museumania.do.am/image/2.jpg" /></p>

</td>

<td>

<p align="center"><span>Гродненский государственный музей истории религии</span></p>

</td>

<td>

<p align="center"><a href="http://www.muzej.by"><span>http://www.muzej.by</span></a></p>

</td>

</tr>

<tr>

<td>

<p><span><img alt="" src="http://museumania.do.am/image/3.gif" />&nbsp;</span></p>

</td>

<td>

<p align="center"><span>Школьный народный минералогический музей </span></p>

 

<p align="center"><span>&laquo;Карат&raquo; ГУО &laquo;Средняя школа №16 г. Гродно&raquo;</span></p>

</td>

<td>

<p align="center"><a href="http://karat.mygrodno.com"><span>http://karat.mygrodno.com</span></a></p>

</td>

</tr>

<tr>

<td>

<p><img alt="" src="http://museumania.do.am/image/4.jpg" /></p>

</td>

<td>

<p align="center"><span>Музей академика Е.Ф. Карского ГУО &laquo;Гимназия №1 г.Гродно имени академика Е.Ф.Карского&raquo;</span></p>

</td>

<td>

<p align="center"><a href="http://gymnasium1-grodno.by/музей-е-ф-карского/"><span>http://gymnasium1-grodno.by/музей-е-ф-карского/</span></a></p>

</td>

</tr>

<tr>

<td>

<p><img alt="" src="http://museumania.do.am/image/5.jpg" /></p>

</td>

<td>

<p align="center"><span>Музей боевой славы &laquo;50-ой армии&raquo;</span></p>

 

<p align="center"><span>ГУО &laquo;Гимназия №5 г. Гродно&raquo;</span></p>

</td>

<td>

<p align="center"><a href="https://gymn5grodno.schools.by/pages/muzej"><span>https://gymn5grodno.schools.by/pages/muzej</span></a></p>

</td>

</tr>

<tr>

<td>

<p><span>&nbsp;<img alt="" src="http://museumania.do.am/image/6.jpg" /></span></p>

</td>

<td>

<p align="center"><span>Музей &quot;Августовок: история и судьбы&quot;</span></p>

 

<p align="center"><span>ГУО &laquo;Гимназия №4 г.Гродно&raquo;</span></p>

</td>

<td>

<p><a href="http://gymn4grodno.schools.by/pages/muzey"><span>http://gymn4grodno.schools.by/pages/muzey</span></a></p>

</td>

</tr>

<tr>

<td>

<p align="center"><img alt="" src="http://museumania.do.am/image/7.jpg" /></p>

</td>

<td>

<p align="center"><span>&laquo;Музей 28-й Краснознаменной армии&raquo; ГУО</span></p>

 

<p align="center"><span>&laquo;Средняя школа №28 г.Гродно&raquo;</span></p>

</td>

<td>

<p><a href="http://sh28grodno.schools.by/pages/myzei-28-krasnoznamennoi-armii"><span>http://sh28grodno.schools.by/pages/myzei-28-krasnoznamennoi-armii</span></a></p>

</td>

</tr>

<tr>

<td>

<p align="center"><img alt="" src="http://museumania.do.am/image/8.jpg" /></p>

</td>

<td>

<p align="center"><span>Музей сялянскага побыту і традыцыйнай беларускай культуры</span></p>

</td>

<td>

<p align="center"><a href="http://gymnasium7.by/музейная-комната/"><span>http://gymnasium7.by/музейная-комната/</span></a></p>

</td>

</tr>

<tr>

<td>

<p><img alt="" src="http://museumania.do.am/image/9.jpg" /></p>

</td>

<td>

<p align="center"><span>Областной дворец творчества детей и молодежи г.Гродно</span></p>

</td>

<td>

<p><a href="http://dtdm-grodno.ucoz.ru"><span>http://dtdm-grodno.ucoz.ru</span></a></p>

</td>

</tr>

<tr>

<td>

<p><img alt="" src="http://museumania.do.am/image/10.jpg" /></p>

</td>

<td>

<p align="center"><span>Клуб коллекционеров &quot;Скарабей&quot;, г.Гродно</span></p>

</td>

<td>

<p align="center"><a href="http://ckg.by/kollektivy/narodnyy-klub-kollekcionerov-skara"><span>http://ckg.by/kollektivy/narodnyy-klub-kollekcionerov-skara</span></a></p>

</td>

</tr>

</tbody>

</table>

после все будет хорошо, и просьба, не фиксируйте размеры каждой ячейке, вообще не задавайте им размеры так как этим вы сами создаете себе проблемы в дальнейшем у таблицы как я писал выше задаем ширину 100% и далее она автоматически будет подстраиваться, а в ячеек вообще задавать размеры не нужно.

---

Yuri_Geruk,

Спасибо, учту!