Тень в табличной верстке

Question

Подскажите пожалуйста, ибо я уже голову сломал. Сделано html письмо, собственно в виде таблицы. Необходимо где title добавить некий фон (на примере зеленого цвета который) и на саму карточку тень или наложение (на картинке оранжевого цвета). Читал, что через position нельзя делать, потому что при рассылке полетит все. Через background не понимаю как. Может кто сталкивался с такой спецификой при верстке HTML таблиц?

<table style="border:2px solid black ;" cellpadding="0" cellspacing="0" width="266px">
  <tr>
    <td>
      <h2 style="font-family: Arial; font-size: 18px; font-weight: 700; line-height: 21px; letter-spacing: 0em; text-align: left;  padding-left: 25px;  ">Разработка сайтов</h2>
      <ul style="font-family: Arial; font-size: 18px; font-weight: 400; line-height: 20px; letter-spacing: 0em;text-align: left;">
        <li style="padding-top:28px;">Визитка</li>
        <li style="padding-top:28px;">Лендинг</li>
        <li style="padding-top:28px;">Корпоративный сайт</li>
        <li style="padding-top:28px;">Интернет-магазин</li>
        <li style="padding-top:28px;">Корпоративный портал</li>
      </ul>
      <button style="background-color: #FD7D49; width:100%; height:40px;">
        <a style="text-decoration:none; font-family: Arial;font-size: 18px;font-weight: 700;line-height: 21px;letter-spacing: 0em;color:#ffffff" href="*">Заказать сайт</a>
      </button>
    </td>
  </tr>
</table>

Answer 1

@Deonis в комментариях предложил хороший вариант с box-shadow, используйте его.

Для элемента тени на h2 можно создать элемент div и трансформировать его с помощью transform: translate (если уже position: absolute нельзя использовать).

Также было правильно подмечено, button использовать для ссылки неправильно, достаточно использовать a и стили для нее.

Например так:

table {
  border: 2px solid black;
  font-family: Arial;
  font-size: 18px;
  box-shadow: 13px 13px 0 0 #ffdcce, 13px 13px 0px 2px #000;
  position: relative;
}

td {
  padding-top: 20px;
}

.shadow {
  left: 25px;
  top: 40px;
  width: 30%;
  height: 12px;
  background-color: rgba(143, 188, 143, 0.5);
  transform: translate(25px, 23px);
}

h2 {
  font-size: 18px;
  font-weight: 700;
  padding-left: 30px;
  margin-top: 0;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

ul {
  margin-bottom: 40px;
  padding-left: 0;
  padding-left: 45px;
}

li {
  margin-bottom: 20px;
}

a {
  background-color: #ffa783;
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  border-top: 2px solid black;
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: 700;
}

<table cellpadding="0" cellspacing="0" width="266px">
  <tr>
    <td>
      <div class="shadow"></div>
      <h2>Разработка сайтов</h2>
      <ul>
        <li>Визитка</li>
        <li>Лендинг</li>
        <li>Корпоративный сайт</li>
        <li>Интернет-магазин</li>
        <li>Корпоративный портал</li>
      </ul>
      <a href="#">Заказать сайт</a>
    </td>
  </tr>
</table>

БЛОГ НА HUSL

Тень в табличной верстке

Ответы (1 шт):