Не правильное отображение картинок в таблице

@iskanderN · Регистрация: 18.02.2014

Author24 — интернет-сервис помощи студентам

Здравствуйте! Проблема в следующем. Есть сайт на движке Wordpress (но дела ни в этом) adrespnz.ru. Тема DIVI. Я вставляю в один из блоков html-код (таблица) и почему-то картинки становятся меньшего размера. Все свойства я прописывал в самой таблице, ничего не выносил в одной таблице. Что нужно сделать, чтобы таблица выглядела так, как она должна выглядеть, а не сжималась и не резалась?
Вот код самой таблиц целиком

HTML5

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 
    <table id="supertable" style="font:15px verdana" width="1200" height="800" background="/wp-content/uploads/2017/12/background.jpg"">
 
  <tr>
    <td width="400" height="400"><img src="/wp-content/uploads/2017/12/1.jpg" width="400" height="400" border="0" alt=""></td>
    <td width="400" height="400" align="center" style="color: white;">ДИЗАЙН ИНТЕРЬЕРОВ<br>ЖИЛЫХ ПОМЕЩЕНИЙ<br><br>-Квартир<br>-Домов<br>-Вилл<br>-Дач<br>-Бассейнов<br>-Сайн и др.<br><br><br>
       <table border="1" bordercolor="white">
                <tr>
                     <td width="200" height="50" align="center" style="color: white;"><a style="color: white;" href="/interior-design-of-residential-premises/" target="_blank" rel="noopener nofollow">Цена. Состав услуг</a></td>
                    
                </tr>
               
                </table></td>
    <td width="400" height="400"><img src="/wp-content/uploads/2017/12/3.jpg" width="400" height="400" border="0" alt=""></td>
  </tr>
  <tr>
    <td width="400" height="400" align="center" style="color: white;">ДИЗАЙН ИНТЕРЬЕРОВ<br>ОБЩЕСТВЕННЫХ ПОМЕЩЕНИЙ<br><br>-Ресторанов<br>-Кафе<br>-Офисов<br>-Гостиниц<br>-Магазинов<br>-Помещений иного назначения<br><br><br>
       <table border="1" bordercolor="white">
                <tr>
                     <td width="200" height="50" align="center" style="color: white;"><a style="color: white;" href="/interior-design-of-public-spaces/" target="_blank" rel="noopener nofollow">Цена. Состав услуг</a></td>
                    
                </tr>
               
                </table></td>
    <td width="400" height="400"><img src="/wp-content/uploads/2017/12/2.jpg" width="400" height="400" border="0" alt=""></td>
    <td width="400" height="400" align="center" style="color: white;">РАЗРАБОТКА ФАСАДОВ<br>ЗДАНИЙ И ОКРУЖЕНИЯ<br><br>-Жилых домов, дач и беседок<br>-Баз отдыха<br>-Торговых центров<br>-Жилых комплексов<br>-Сооружений<br>иного назначения<br><br><br>
       <table border="1" bordercolor="white">
                <tr>
                    <td width="200" height="50" align="center" style="color: white;"><a style="color: white;" href="/development-of-facades-of-buildings-and-environment/" target="_blank" rel="noopener nofollow">Цена. Состав услуг</a></td>
                    
                </tr>
               
                </table>
    
    
    </td>
  </tr>
  
  </table>
 
 </body>
</html>

Вложение 1 - так должно выглядеть
Вложение 2 - как выглядит после вставки на сайт

Сама по себе страница работает нормально(1), а когда добавляю на сайт выходит вот такая фигня(2)

@Fourd · 17.12.2017, 16:58

так у вас в стилях отступы есть

CSS

.entry-content tr td, body.et-pb-preview #main-content .container tr td {
    padding: 6px 24px;
    border-top: 1px solid #eee;
}

@iskanderN · 17.12.2017, 17:02 **[ТС]**

Я понимаю, что это в стилях. Вот я и спрашиваю. Как мне сделать, чтобы стили не сломать и изображения вытянуть по всей ячейки.

@Fourd · 17.12.2017, 17:11

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

CSS

#supertable tr:nth-child(2n+1)>td:nth-child(2n+1),
#supertable tr:nth-child(2n)>td:nth-child(2n) {
    padding: 0;
}

@iskanderN · 17.12.2017, 17:17 **[ТС]**

Не много не так) Не до конца встает и плюс еще как белую черту убрать?

@Fourd · 17.12.2017, 17:23

чтобы убрать белую черту добавить стиль

CSS

1	#supertable tr>td { border: 0; }

а то что у вас отступ добавился это не правильно, прежде чем вам написать проверил все работало, видимо где то затерли чего

@iskanderN · 17.12.2017, 17:28 **[ТС]**

Единственное, что пробовал удалять этот тот код CSS, который Вы говорили мешает отображению. Потом я его поставил на место, потому что слетала остальная верстка. Кстати когда его удалял таблица приобретала надлежащий вид. Что теперь делать? Как исправить? Не могли бы Вы еще раз взглянуть?

Добавлено через 1 минуту

Сообщение от Fourd

#supertable tr>td { border: 0; }

При добавление этого свойства черта ни куда не девается)

@Fourd · 17.12.2017, 17:37

потому что вы ее не туда добавили))
боюсь вы чего то затерли таки, давайте вы вернетесь к варианту, что был у вас перед внесением изменений (ctrl+z)
затем добавите в конец вашего файла стилей

CSS

#supertable tr:nth-child(2n+1)>td:nth-child(2n+1),
#supertable tr:nth-child(2n)>td:nth-child(2n) {
    padding: 0;
}
#supertable tr>td {
    border: 0;
}

Добавлено через 2 минуты
нашел ошибку

CSS

table#supertable img {
  width:400px; /* забыли ; браузер не мог понять свойство */
  height:400px
}

@iskanderN · 17.12.2017, 17:41 **[ТС]**

Спасибо Вам большое! Вы очень сильно мне помогли!
Почему-то изображение получается вытянутое) Ячейка получается 352*400. Должна быть 400*400

@Fourd · 17.12.2017, 17:52

признаюсь вам, сверстано очень плохо, начиная с разметки html
у вас шаблон идущий по всей странице имеет ширину в 1080px, а вам надо чтобы у таблицы было 1200px (400 три раза)
вы можете задать конкретно этой таблице размер в 1200px, но она не будет находится прямо по центру, либо сделать размер ячеек меньше
мой вам совет исправить все, хоть по чуть чуть начать, потому что потом вам это выйдет еще большой проблемой

@iskanderN · 17.12.2017, 17:56 **[ТС]**

Если я исправлю ширину на 1080 - это поможет?

@Fourd · 17.12.2017, 18:07

нет, она у вас сейчас 1080, потому что родительские контейнеры имеют такой размер, а у вас в стилях указывается ширина width: 100% что говорит наследовать 100% ширины родителя
если вам не принципиально, что таблица будет не по центру то

CSS

1
2
3

#supertable {
    width: 1200px;
}

Добавлено через 1 минуту
и поправьте вот тут, так как у вас в таблице еще таблица вложена, обратимся на прямых потомков, чтобы не сломать чего внутри

CSS

#supertable>tbody>tr:nth-child(2n+1)>td:nth-child(2n+1),
#supertable>tbody>tr:nth-child(2n)>td:nth-child(2n) {
    padding: 0;
}

@iskanderN · 17.12.2017, 18:14 **[ТС]**

Нет я сейчас поменяю размер картинок на 360 и 1080 и все размеры в таблице. В этом случае что-то нужно менять в CSS?

@Fourd · 17.12.2017, 18:16

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

@iskanderN · 17.12.2017, 18:18 **[ТС]**

А какой будет тогда конечный CSS? Можете написать?

@Fourd · 17.12.2017, 18:25

я смотрю вы все сделали правильно, за исключением отступов в ячейках

HTML5

<td width="360" height="360" align="center" style="color: white;">ДИЗАЙН ИНТЕРЬЕРОВ<br>ЖИЛЫХ ПОМЕЩЕНИЙ<br><br>-Квартир<br>-Домов<br>-Вилл<br>-Дач<br>-Бассейнов<br>-Сайн и др.<br><br><br><br>
       <br><br><p></p><p>                </p><p></p><p>                </p><table border="1" bordercolor="white">
                <tbody><tr>
                     <td width="200" height="50" align="center" style="color: white;"><a style="color: white;" href="/interior-design-of-residential-premises/" target="_blank" rel="noopener nofollow">Цена. Состав услуг</a></td>
</tr>
</tbody></table></td>

<br> или <p></p> тэги нужно убрать лишнее

@iskanderN · 17.12.2017, 18:30 **[ТС]**

Теперь вроде нормально) Можете еще раз посмотреть? Заранее Огромное Спасибо Вам!
Еще один вопрос! А как сделать, чтобы в мобильной версии ничего не менялось, а то табличку колбасит на телефоне

@Fourd · 17.12.2017, 18:37

знаете если вам таблица внутри таблицы не нужна, я бы сделал так, к примеру первая ячейка с текстом
удалил бы вложенную таблицу и оставил бы просто ссылку

HTML5

<td width="360" height="360" align="center" style="color: white;">ДИЗАЙН ИНТЕРЬЕРОВ
  <br>ЖИЛЫХ ПОМЕЩЕНИЙ
  <br>-Квартир
  <br>-Домов
  <br>-Вилл
  <br>-Дач
  <br>-Бассейнов
  <br>-Сайн и др.
  <a style="color: white;" href="/interior-design-of-residential-premises/" target="_blank" rel="noopener nofollow">Цена. Состав услуг</a>
</td>

добавил новый свойство position: relative; к ранее созданному набору свойств к ячейке

CSS

#supertable tr>td {
    border: 0;
    position: relative;
}

и стили для самой ссылки

CSS

#supertable a {
    display: block;
    border: 1px solid #fff;
    padding: 10px 0;
    position: absolute;
    bottom: 24px;
    right: 24px;
    left: 24px;
}

@iskanderN · 17.12.2017, 18:46 **[ТС]**

Стало намного лучше. Но таблица все равно вытягивается в мобильной версии.

@Fourd · 17.12.2017, 18:58

ну сейчас у вас она не рассчитана на адаптив
а ужалась потому что у вас есть свойство для изображений

CSS

img {
    max-width: 100%;
    height: auto;
}

@iskanderN 1 / 1 / 0 Регистрация: 18.02.2014 Сообщений: 74
	17.12.2017, 18:14 [ТС]	13
	Нет я сейчас поменяю размер картинок на 360 и 1080 и все размеры в таблице. В этом случае что-то нужно менять в CSS? 0

@iskanderN 1 / 1 / 0 Регистрация: 18.02.2014 Сообщений: 74
	17.12.2017, 18:46 [ТС]	19
	Стало намного лучше. Но таблица все равно вытягивается в мобильной версии. 0

Новые блоги и статьи
Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .	Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .	Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .
Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .

@iskanderN 1 / 1 / 0 Регистрация: 18.02.2014 Сообщений: 74
	17.12.2017, 17:02 [ТС]	3
	Я понимаю, что это в стилях. Вот я и спрашиваю. Как мне сделать, чтобы стили не сломать и изображения вытянуть по всей ячейки. 0

@iskanderN 1 / 1 / 0 Регистрация: 18.02.2014 Сообщений: 74
	17.12.2017, 17:17 [ТС]	5
	Не много не так) Не до конца встает и плюс еще как белую черту убрать? Миниатюры 0

@iskanderN 1 / 1 / 0 Регистрация: 18.02.2014 Сообщений: 74
	17.12.2017, 17:28 [ТС]	7
	Единственное, что пробовал удалять этот тот код CSS, который Вы говорили мешает отображению. Потом я его поставил на место, потому что слетала остальная верстка. Кстати когда его удалял таблица приобретала надлежащий вид. Что теперь делать? Как исправить? Не могли бы Вы еще раз взглянуть? Добавлено через 1 минуту Сообщение от Fourd #supertable tr>td { border: 0; } При добавление этого свойства черта ни куда не девается) 0

@iskanderN 1 / 1 / 0 Регистрация: 18.02.2014 Сообщений: 74
	17.12.2017, 17:41 [ТС]	9
	Спасибо Вам большое! Вы очень сильно мне помогли! Почему-то изображение получается вытянутое) Ячейка получается 352400. Должна быть 400400 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	17.12.2017, 17:52	10
	признаюсь вам, сверстано очень плохо, начиная с разметки html у вас шаблон идущий по всей странице имеет ширину в 1080px, а вам надо чтобы у таблицы было 1200px (400 три раза) вы можете задать конкретно этой таблице размер в 1200px, но она не будет находится прямо по центру, либо сделать размер ячеек меньше мой вам совет исправить все, хоть по чуть чуть начать, потому что потом вам это выйдет еще большой проблемой 1

@iskanderN 1 / 1 / 0 Регистрация: 18.02.2014 Сообщений: 74
	17.12.2017, 17:56 [ТС]	11
	Если я исправлю ширину на 1080 - это поможет? 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	17.12.2017, 18:16	14
	теоретически, если размер картинок и ячеек поставите 360x360, а также уберете лишние абзацы в ячейках с текстом, то да все должно выровняться 0

@iskanderN 1 / 1 / 0 Регистрация: 18.02.2014 Сообщений: 74
	17.12.2017, 18:18 [ТС]	15
	А какой будет тогда конечный CSS? Можете написать? 0

@iskanderN 1 / 1 / 0 Регистрация: 18.02.2014 Сообщений: 74
	17.12.2017, 18:30 [ТС]	17
	Теперь вроде нормально) Можете еще раз посмотреть? Заранее Огромное Спасибо Вам! Еще один вопрос! А как сделать, чтобы в мобильной версии ничего не менялось, а то табличку колбасит на телефоне 0

Не правильное отображение картинок в таблице

Решение