Картинка в середине строки таблицы

Pinguin · September 7, 2018

Требуется поместить картинку в середину строки таблицы, между ячейками. Выглядеть должно, как на первом верхнем примере. Сделал так:

<html>
<head>
<style type="text/css">
<!--
tr.im {
background-image: url(img.gif);
background-repeat: no-repeat;
background-position: center center;
}
-->
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0" border="1">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr class="im">
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>

Однако, в разных браузерах это выглядит очень по-разному.
1 пример (правильно) - Firefox 52.9.0.
2 пример (неправильно) - Opera 36.0.
3 пример (неправильно) - Opera 47.1. для Андроида.

Подскажите, пожалуйста, как сделать, чтобы таблица везде выглядела, как в первом примере?

AlexZaw · September 7, 2018

16 минут назад, Pinguin сказал:

Подскажите, пожалуйста, как сделать, чтобы таблица везде выглядела, как в первом примере?

Можно так:

<table cellpadding="0" cellspacing="0" border="1">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="im"><img src="http://placekitten.com/g/20" alt=""></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

td{
  width: 100px;
  height: 50px;
}
.im{
  position: relative;
}
.im img{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}

Switch74 · September 7, 2018

а background не рассматривали?

AlexZaw · September 7, 2018

57 минут назад, Switch74 сказал:

а background не рассматривали?

Фон в любом случае будет либо обрезаться, либо повторяться для каждой ячейки, либо будет только в одной ячейке в зависимости от браузера. Firefox,по моему, единственный кто работает с фоном подобным образом, ну и, возможно, другие браузеры на движке Gecko.
Хотя, опять же IMHO, вариант рендера фона для tr у лисы наиболее правильный.

Switch74 · September 7, 2018

я имел ввиду что-нибудь на вроде этого например
http://jsfiddle.net/ekvrdq5h/

Pinguin · September 7, 2018

AlexZaw, большое спасибо, ваш пример действительно работает во всех браузерах. Но к сожалению, данное решение не подходит, потому что в реальности таблица, конечно, не пустая. Это я для простоты не стал её ничем заполнять, а на самом деле в ячейках есть содержимое - и картинки, и текст. Схематично это выглядит так:

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

AlexZaw · September 7, 2018

11 минут назад, Pinguin сказал:

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

Так никакой проблемы нет, картинка спозиционирована абсолютно и остальные элементы ее не видят

21 минуту назад, Switch74 сказал:

я имел ввиду что-нибудь на вроде этого например

Интересное решение, но зачем?

Switch74 · September 7, 2018

Только что, AlexZaw сказал:

15 минут назад, Switch74 сказал:

я имел ввиду что-нибудь на вроде этого например

Интересное решение, но зачем?

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

AlexZaw · September 7, 2018

5 минут назад, Switch74 сказал:

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

Убедили ? тогда вот так:

<table cellpadding="0" cellspacing="0" border="1">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="im"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

td{
  width: 100px;
  height: 50px;
}
.im{
  position: relative;
}

.im:before{
  position: absolute;
  width: 20px;
  height: 20px;
  background: url(http://placekitten.com/g/20);
  content: '';
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  z-index: -1;
}

Switch74 · September 7, 2018

ок :)

Pinguin · September 7, 2018

21 минуту назад, AlexZaw сказал:

Так никакой проблемы нет, картинка спозиционирована абсолютно и остальные элементы ее не видят

А проблема в том, что вы поместили её в ячейку и задали этой ячейке стиль. Поэтому позиционирование будет влиять на все картинки в этой ячейке - какие надо и какие не надо.

И вместо

получится:

А последнее решение работает, да! Мудрёно, конечно, но работает. Большое спасибо!

AlexZaw · September 7, 2018

18 минут назад, Pinguin сказал:

А проблема в том, что вы поместили её в ячейку и задали этой ячейке стиль. Поэтому позиционирование будет влиять на все картинки в этой ячейке - какие надо и какие не надо.

Можно задать класс для "фоновой" картинки и позиционировать именно ее, а не все картинки.

20 минут назад, Pinguin сказал:

Мудрёно, конечно, но работает

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

Sign In

Картинка в середине строки таблицы

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information