Как задать ширину ячеек таблицы под контент

Рейтинг: 0Ответов: 1Опубликовано: 21.04.2015

Подскажите пожалуйста как сделать через инлайновые свойства (письмо верстаю) чтобы ширина каждой ячейки была автоматически подогнана под контент? Проблема в том, что у меня ширина ячейки зависит от ширины самого большого контента в столбце таблицы.

А мне нужно чтобы не было никаких пробелов между ячейками в строке (при этом не объединяя ячейки). Пример кода на облаке и тут:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
  </head>
  <body>
    <table border="1,solid,#000000" cellpadding="0" cellspacing="0" width="100%" style="background-color:#dfdfdf">
      <thead>
        <tr>
          <td height="10px"></td>
        </tr>
        <tr>
        </tr>
        <tr>
          <td colspan="3" height="20px"></td>
        </tr>
      </thead>
      <tbody align="center">
        <tr>
          <td>
            <table border="1, solid, #000000" cellpadding="0" cellspacing="0" style="margin:0; padding:0; background-color:#f2f2f2">
              <tr>
                <td width="20px"></td>
                <td>
                  <table align="center" border="1, solid, #000000" cellpadding="0" cellspacing="0" style="margin:0; padding:0; background-color:#f2f2f2; text-align:left">
                    <tr>
                      <td style="color: #000000; font-family: sans-serif">Значение</td>
                      <td style="color: #000000; font-family: sans-serif">@очень_длинная_переменная</td>
                    </tr>
                    <tr>
                      <td height="10px"></td>
                    </tr>
                    <tr>
                      <td style="color: #000000; font-family: sans-serif">Значение</td>
                      <td style="color: #000000; font-family: sans-serif">@переменная</td>
                    </tr>
                    <tr>
                      <td height="10px"></td>
                    </tr>
                    <tr>
                      <td style="color: #000000; font-family: sans-serif">@переменная</td>
                      <td style="color: #000000; font-family: sans-serif">х</td>
                      <td style="color: #000000; font-family: sans-serif">@переменная</td>
                      <td style="color: #000000; font-family: sans-serif">@переменная</td>
                    </tr>
                    <tr>
                      <td height="5px"></td>
                    </tr>
                  </table>
                </td>
                <td width="10px"></td>
              </tr>
            </table>
          </td>
        </tr>
      </tbody>
      <tfoot>
      </tfoot>
    </table>
  </body>
</html>
html
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Как вариант для каждой строки создавать отдельную таблицу, а не в одной, как у Вас. Либо сверстать на дивайдерах.

Итоговый вариант на таблицах:

    <html>
      <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type">
      </head>
      <body>
        <table border="1,solid,#000000" cellpadding="0" cellspacing="0" width="100%" style="background-color:#dfdfdf">
          <thead>
            <tr>
              <td height="10px"></td>
            </tr>
            <tr>
            </tr>
            <tr>
              <td colspan="3" height="20px"></td>
            </tr>
          </thead>
          <tbody align="center">
            <tr>
              <td>
                <table cellpadding="0" cellspacing="0" style="margin:0; padding:0; background-color:#f2f2f2;border: 1px solid black">
                  <tr>
                    <td width="20px"></td>
                    <td>
                      <table align="center" border="1" cellpadding="0" cellspacing="0" style="margin:0; padding:0; background-color:#f2f2f2; text-align:left; border: 1px solid black">
                        <tr>
                          <td style="color: #000000; font-family: sans-serif">
                            <table border="1">
                              <tr>
                                <td>Значение:                              
                                </td>                          
                                <td>@очень_длинная_переменная                              
                                </td>
                              </tr>
                            </table>
                          </td>
                        <tr>
                          <td height="10px"></td>
                        </tr>
                        <tr>
                          <td style="color: #000000; font-family: sans-serif">
                            <table border="1">
                              <tr>
                                <td>Значение:                              
                                </td>                         
                                <td>@длинная_переменная                              
                                </td>
                              </tr>
                            </table>
                          </td>                    
                        <tr>
                          <td height="10px"></td>
                        </tr>
                        <tr>
                          <td style="color: #000000; font-family: sans-serif">
                            <table border="1">
                              <tr align="left">
                                <td>@переменная                           
                                </td>                         
                                <td>x                             
                                </td>                          
                                <td>@переменная                             
                                </td>                          
                                <td>@переменная                             
                                </td>
                              </tr>
                            </table>
                          </td>   
                        <tr>
                          <td height="5px"></td>
                        </tr>
                      </table>
                    </td>
                    <td width="10px"></td>
                  </tr>
                </table>
              </td>
            </tr>
          </tbody>
          <tfoot>
          </tfoot>
        </table>
      </body>
    </html>