Фон таблицы внутри ячейки заполнен неправильно - PullRequest
Новая
       12

Фон таблицы внутри ячейки заполнен неправильно

1 голос
/ 22 марта 2019

Я совершенно новичок в создании HTML-тела, но мне нужно создать HTML-текст электронного письма, я должен поместить в это сообщение электронное письмо с некоторыми данными. Это довольно простая таблица с 2 строками и 4 столбцами, но есть 3 ячейки, которые должны быть разделены. Итак, я создал таблицу (1 строка 2 столбца) внутри этой ячейки. И вот проблема, при заполнении этих новых ячеек, там "основная" ячейка не заполнена правильно, см. Ниже. пример Как правильно заполнить это. Буду благодарен за код, который его заполняет. Мое HTML-тело: 

<table style="text-align: center; padding: 8px; width: 600px;" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table style="height: 50px; width: 150px; text-align: center;" >
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

И я хотел бы получить что-то подобное: пример

1 Ответ

1 голос
/ 25 марта 2019

Все ваши <table> должны быть 

<table cellspacing="0" cellpadding="0" border="0">

, это удалит дополнительные белые отступы в <td>

enter image description here

<table cellpadding="0" cellspacing="0" border="0" style="text-align: center; padding: 8px; width: 600px;" border="1"
  cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="width: 150px; text-align: center;">Done</td>
      <td style="width: 150px; text-align: center;">Success</td>
      <td style="width: 150px; text-align: center;">Overwrited</td>
      <td style="width: 150px; text-align: center;">Unrecognized</td>
    </tr>
    <tr>
      <td style="font-size: 24px; font-weight: bold;">{1}</td>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
          <tbody>
            <tr>
              <td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
                bgcolor="#00cc00">{2}</td>
              <td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="width: 150px; ">
        <table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
          <tbody>
            <tr>
              <td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
                bgcolor="#ee4c50">{4}</td>
              <td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="width: 150px;">
        <table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
          <tbody>
            <tr>
              <td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
                bgcolor="#99ccff">{6}</td>
              <td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
...