Блог

Итак, ниже приведена эта таблица. По сути, он создает сетку изображений, которые отправляются в электронное письмо. потому что это электронное письмо, для которого мне нужен стиль in-line . Сетка отлично смотрится на рабочем столе, но при просмотре на мобильном устройстве каждая таблица выравнивается влево, оставляя пустое пространство справа. однако, если я изменю тег выравнивания, сетка больше не будет работать на рабочем столе.

Есть ли способ со in-line стилями либо выровнять содержимое по центру при просмотре только на мобильном устройстве, либо, по крайней мере, заставить таблицу заполнить контейнер при просмотре на меньшем экране?

      <tbody>
      <tr>
        <td>
          <tr><td align="left" style=" border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"  valign="top">
                
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top"> 
                
              <img  style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#">          
              </tr></td></tbody></table>
                
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
              <img  style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226"  src="#" /></tr></td></tbody></table>
              
              <table  border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
              
              <img  style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226"  src="#" /></tr></td></tbody></table>         
            </td>
          </tr>
        
        <tr><td align="left" style=" border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"  valign="top">
                
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
                         
              <img  style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#">
              </tr></td></tbody></table>
                
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
              <img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226"  src="#" /></tr></td></tbody></table>
              
              <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
              
              <img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226"  src="#" /></tr></td></tbody></table>
            </td>
          </tr>
      </tbody>
     </table>```
 

Я не знаю, так ли важна таблица для использования ,

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

 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: '100[%,vw]'; // may not necessary
}
 

css flex так важен для адаптивного дизайна.

если нет, поместите свою таблицу в div и придайте ей стиль

размер (ширина) мобильного устройства в целом