Как сделать якорь не превышающим ширину ячейки таблицы?

Question

Моя проблема заключается в том, что мой якорь превышает табличную ячейку на дисплее iphone 5.

Я это как стиль для ячейки white-space: nowrap;

Для анкера я просто цвет фона: background: #f88e1e;

Могли бы вы совет, пожалуйста?

<table class="subscriptionTable"> 
    <thead> 
     <tr> 
      <th class="feature"></th> 
      <th class="free">free</th> 
      <th class="middle">silver</th> 
      <th class="top">gold</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="feature"><a href="somelink"></a>linktarget</td> 
      <td></td> 
      <td></td> 
      <td><span class="icon-tick"></span></td> 
     </tr> 
     <tr> 
      <td class="feature"><a href="somelink"></a>linktarget</td> 
      <td></td> 
      <td></td> 
      <td><span class="icon-tick"></span></td> 
     </tr> 
      <tr> 
       <td class="feature"></td> 
       <td> 
       </td> 
       <td></td> 
       <td> 
        <a class="someClass" href="somelink">Free trial</a> 
       </td> 
      </tr> 
    </tbody> 
</table> 

мне удалось дать текст на одной строке, добавив white-space: nowrap Но теперь ширина анкерные превышает ширину ячейки. Анкер должен оставаться внутри ...

Answer 1

Будь то display:table-cell (CSS) или фактические таблицы HTML, вы не можете предотвратить немедленное содержимое ячейки таблицы. Они всегда будут расширяться, чтобы соответствовать содержанию. Если вы хотите отрегулировать содержимое внутри display: table-cell, вам необходимо обернуть его в другой элемент контейнера и установить другой тип отображения (блок/таблица и т. Д.).