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

Question

Я разрабатываю шаблон информационного бюллетеня, и у меня проблема с таблицей, содержащей графику и текст в той же строке. По какой-то причине графический текст полностью перемещает текст вправо. Я хочу, чтобы текст был «подключен»/левый, совмещенный с значком, так как в шаблоне используется до трех наборов значков (значок + текст).

https://jsfiddle.net/o1dLoxa8/

код не выглядит довольно прямо сейчас, как я пытался все просто, чтобы сделать его работу. Кто-нибудь может мне помочь?

<table border="0" cellpadding="0" cellspacing="0" class="salesListText">   
    <tr> 
     <td align="left" valign="middle" class="saleslistIcon"> 
      <img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/billetterL.png" alt="" height="28" width="28" /> 
     </td>   
     <td align="left" valign="middle" class="saleslistIconText"> 
      Billetter  
     </td>    
    </tr>     
    <tr>    
     <td valign="baseline" colspan="3"> 
      <h2>Kaptein Sabeltann - Kun forestillingen</h2>    
      (Kan kombineres med parkbilletter og/eller overnatting)  
     </td> 
    </tr> 
    <tr> 
     <td valign="baseline"> 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" class="salesListSpec"> 
       <tr> 
        <td valign="baseline" colspan="3"> 
         <h4>Pakken inneholder:</h4> 
         - Billetter til forestillingen 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td align="left" valign="top" class="saleslistPrice" colspan="3"> 
      <h2 style="color:#E3178A;"><span>Pris fra&nbsp;</span>240,-</h2> 
     </td> 
    </tr> 
</table> 

.saleslistIcon{padding-right:10px;} 
.saleslistIconText{color:#B4B4B4; font-size:12px; padding-right:8px;} 
.salesListText{width:100%;} 
.salesListSpec{padding-top:10px; line-height:170%; display:block;} 
h2 span{font-size:16px; font-weight:normal; color:#444444;} 

Answer 1

У вас есть таблица с тремя столбцами; но вы помещаете изображение (маленькое) и текст тела (большой) в том же столбце (0). Это подтолкнет колонки 2 и 3 направо.

Попробуйте ввести border="1" на свое определение table, чтобы узнать, что я имею в виду.

Я предлагаю вам использовать внешнюю таблицу для создания ваших строк и иметь только один TD. Внутри каждого TD затем вставляйте вторичные таблицы для сложной компоновки. Я беру бюллетень электронной почты, поэтому держите CSS как минимум или помещайте его как встроенный, а не отдельный раздел стиля. Многие поставщики электронной почты не очень хорошо играют с CSS.

Надеюсь, что это поможет.

Answer 2

От взгляда вашей скрипки это следует ожидать. Вы используете макет таблицы, что означает, что все ячейки в одном столбце будут иметь одинаковую ширину, и все ячейки в одной строке будут иметь одинаковую высоту. Моя немедленная рекомендация состоит в том, чтобы выровнять расположение таблицы и использовать semantic elements.

Если вы пытаетесь использовать макет таблицы, вы должны знать свои атрибуты colspan and rowspan на своих сотах и ​​как они влияют на ваш макет.

Answer 3

Путь display:inline внутри <tr> где у вас есть значок + текст.

http://jsfiddle.net/zg0zrx3v/