HTML выравнивание таблицы работает неправильно - PullRequest
Новая
       7

HTML выравнивание таблицы работает неправильно

0 голосов
/ 22 января 2020

В настоящее время я создаю HTML шаблон электронной почты. У меня есть таблица с 3 столбцами для следующего:

[[логотип] [текстовое содержимое] [дата]]

Таким образом, lo go должно быть выровнено по левому краю, а дата справа выровнены. Однако в перспективе это не похоже на то, что поплавок принимается. вот как это выглядит сейчас .

Вот мой текущий код: 

<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
  <tbody>
    <tr>
      <td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
      </td>
      <td width="63%;">
        {{this.notificationMessage}}
      </td>
      <td width="30%" style="text-align:right; margin-left:6px;">{{this.date}}
      </td>
    </tr>
  </tbody>
</table>

Я застрял с этой проблемой некоторое время, любая помощь очень ценится

Ответы [ 4 ]

4 голосов
/ 22 января 2020

HTML должен быть закодирован так, как будто это 1999 год.

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

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

<td align=left"></td>

<td align=right"></td>

Если это не сработает, попробуйте использовать CSS, например, 

<td style="text-align: left;"></td>

Вот хорошее руководство по созданию HTML шаблона электронной почты от Mailchimp:

https://templates.mailchimp.com/getting-started/html-email-basics/

0 голосов
/ 22 января 2020

Вы должны style="text-align:left; " для тд.

Использовать приведенный ниже исправленный код. 

<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
  <tbody>
    <tr>
      <td width="6%" style="text-align:left;" > <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
      </td>
      <td width="63%;" style="text-align:left;" >
        Notification message
      </td>
      <td width="30%" style="text-align:right; margin-left:6px;">date
      </td>
    </tr>
  </tbody>
</table>
0 голосов
/ 22 января 2020

вы можете использовать Число с плавающей запятой: вправо , и я думаю, что вы должны пропустить что-нибудь о flex (я имею в виду: display: flex; flex-wrap: wrap;). 

<html>
<body>
<table cellspacing="0" cellpadding="0" border="0" style=" margin-bottom:10px; width:100%;">
   <tbody>
      <tr>
         <td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="img.."> 
         </td>
         <td width="63%;">
           aa
         </td>
         <td width="30%" style="text-align:right;float:right; margin-left:6px;">bb
         </td>
      </tr>
   </tbody>
</table>
</body>
</html>
0 голосов
/ 22 января 2020

Вы также можете указать «text-align: left» вместо «float: left» для

...