Как исправить перекрывающийся текст в ячейках таблицы?

Question

У меня есть <td>, содержащий тег <a>, и то, что кажется повторяющимся, состоит в том, что последние несколько символов (1 ~ 4) не будут отображаться как часть гиперссылки (не подчеркнута, а не нажата, но цвет синий) , Есть ли для этого исправление CSS/JS? Похоже на это (с c, e, s также является синим).

С соседней камере перекрывая часть, которая не является частью гиперссылке, подобно этому:

My Link That Goes Pla КЕС

Пример кода:

<table> 
    <tr> 
     <td><a href="#">First Link</a></td> 
     <td>No Link</td> 
    </tr> 
</table> 

Answer 1

Вполне вероятно, что у вас есть table-layout:fixed набор на столе, а ширина недостаточно для хранения содержимого внутри, см. следующую демонстрацию для воспроизведения проблемы.

table { 
 
    width: 30px; /*increase value*/ 
 
    table-layout: fixed; /*remove this*/ 
 
}

<table> 
 
    <tr> 
 
     <td><a href="#">Link Link</a></td> 
 
     <td>Text Text</td> 
 
    </tr> 
 
</table>

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

Либо удалите эту table-layout правило или увеличить width, или то и другое.

Другие вещи могут помочь:

Удалить white-space:nowrap;, если он установлен где-то связаны между собой.

Комплект word-break:break-all; по мере необходимости, чтобы заставить длинные слова сломаться.

Answer 2

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

Try сброса CSS для таблицы по умолчанию на странице

table, 
 
thead, 
 
tbody, 
 
tfoot, 
 
tr, 
 
th, 
 
td { 
 
    display: block; 
 
    width: auto; 
 
    height: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
    border-collapse: inherit; 
 
    border-spacing: 0; 
 
    border-color: inherit; 
 
    vertical-align: inherit; 
 
    text-align: left; 
 
    font-weight: inherit; 
 
    -webkit-border-horizontal-spacing: 0; 
 
    -webkit-border-vertical-spacing: 0; 
 
} 
 
th, td { 
 
    display: inline; 
 
}