Поведение переноса (неправильного) таблицы TD?

#html #css

#HTML #css

Вопрос:

Я извлек свою таблицу в этот простой формат, чтобы сузить проблему.

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

PS Я не уверен, что простая вставка html-кода ниже может показать вам проблему, которую я хотел показать здесь, поэтому добавил ссылку codepen, а также прикрепил скриншот проблемы — в надежде, что хотя бы один появится.

 table.diff {
  font-family: Courier, sans-serif;
  border: 1px solid black;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border-bottom: 1px solid #83728d;
}

td {
  border: 2px solid black;
}

 <table class="diff">
  <tbody>
    <tr>
      <td>banner value You are cccccccccc to the MMMMMM UUUUUUUUUU NNN. Use of MMMMMM BBBBBBBBBB's TT ffffffffff is governed by the IIIIIIIIIII DDDDDDDDDD AAAAAAAAAA Use Policy detailed at: https://www.xxxxxx.xxx/pppppp-bbbb/pppppppp-and-pppppppppp/mmmmmmmmmm/iii</td>

      <td>banner value You are cccccccccc to the MMMMMM UUUUUUUUUU NNN. Use of MMMMMM BBBBBBBBBB's TT ffffffffff is governed by the IIIIIIIIIII DDDDDDDDDD AAAAAAAAAA Use Policy detailed at: https://www.xxxxxx.xxx/pppppp-bbbb/pppppppp-and-pppppppppp/mmmmmmmmmm/iii</td>
    </tr>
  </tbody>
</table>

<br><br><br>
<table class="diff">
  <tbody>
    <tr>
      <td>aaaaaa vvvvv YYY aaa cccccccccc tt ttt MMMMMM UUUUUUUUUU VVV. UUU oo MMMMMM UUUUUUUUUU'U II ffffffffff ii gggggggg bb ttt IIIIIIIIIII TTTTTTTTTT AAAAAAAAAA UUU PPPPPP dddddddd aa: hhhhh://hhh.hhhhhh.hhh/hhhhhh-hhhh/hhhhhhhh-hhh-hhhhhhhhhh/hhhhhhhhhh/hhh</td>

      <td>aaaaaa vvvvv YYY aaa cccccccccc tt ttt MMMMMM UUUUUUUUUU VVV. UUU oo MMMMMM UUUUUUUUUU'U II ffffffffff ii gggggggg bb ttt IIIIIIIIIII TTTTTTTTTT AAAAAAAAAA UUU PPPPPP dddddddd aa: hhhhh://hhh.hhhhhh.hhh/hhhhhh-hhhh/hhhhhhhh-hhh-hhhhhhhhhh/hhhhhhhhhh/hhh</td>
    </tr>

  </tbody>
</table>

Ответ №1:

Проблема проста, у вас нет реальных пробелов, у вас есть только одно большое слово.

 banneramp;nbsp;valueamp;nbsp;Youamp;nbsp;....... VS banner value. You

Добавьте это в свою таблицу.diff и это решит вашу проблему.

 word-break: break-all;

или даже лучше выглядит:

 word-break: break-word;

Вышеописанное может произойти, если вы скопируете вставляете свой текст из редактора Word или выполняете какое-либо другое форматирование.

1. break-all сработал для меня, спасибо за это :-), к сожалению, это сломало несколько других вещей в моей оригинальной большой таблице html. Я постараюсь посмотреть, смогу ли я это исправить, возможно, мне снова понадобится ваша помощь.

Ответ №2:

Вот физический способ исправить вашу amp;nbsp; проблему

 $("#table1 tr td").each(function() {
  this.textContent = decodeURIComponent(encodeURIComponent(this.textContent).replace(/ /g," "))
})

 table.diff {
  font-family: Courier, sans-serif;
  border: 1px solid black;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border-bottom: 1px solid #83728d;
}

td {
  border: 2px solid black;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="diff" id="table1">
  <tbody>
    <tr>
      <td>banner value You are cccccccccc to the MMMMMM UUUUUUUUUU NNN. Use of MMMMMM BBBBBBBBBB's TT ffffffffff is governed by the IIIIIIIIIII DDDDDDDDDD AAAAAAAAAA Use Policy detailed at: https://www.xxxxxx.xxx/pppppp-bbbb/pppppppp-and-pppppppppp/mmmmmmmmmm/iii</td>

      <td>banner value You are cccccccccc to the MMMMMM UUUUUUUUUU NNN. Use of MMMMMM BBBBBBBBBB's TT ffffffffff is governed by the IIIIIIIIIII DDDDDDDDDD AAAAAAAAAA Use Policy detailed at: https://www.xxxxxx.xxx/pppppp-bbbb/pppppppp-and-pppppppppp/mmmmmmmmmm/iii</td>
    </tr>
  </tbody>
</table>

<br><br><br>
<table class="diff" id="table2">
  <tbody>
    <tr>
      <td>aaaaaa vvvvv YYY aaa cccccccccc tt ttt MMMMMM UUUUUUUUUU VVV. UUU oo MMMMMM UUUUUUUUUU'U II ffffffffff ii gggggggg bb ttt IIIIIIIIIII TTTTTTTTTT AAAAAAAAAA UUU PPPPPP dddddddd aa: hhhhh://hhh.hhhhhh.hhh/hhhhhh-hhhh/hhhhhhhh-hhh-hhhhhhhhhh/hhhhhhhhhh/hhh</td>

      <td>aaaaaa vvvvv YYY aaa cccccccccc tt ttt MMMMMM UUUUUUUUUU VVV. UUU oo MMMMMM UUUUUUUUUU'U II ffffffffff ii gggggggg bb ttt IIIIIIIIIII TTTTTTTTTT AAAAAAAAAA UUU PPPPPP dddddddd aa: hhhhh://hhh.hhhhhh.hhh/hhhhhh-hhhh/hhhhhhhh-hhh-hhhhhhhhhh/hhhhhhhhhh/hhh</td>
    </tr>

  </tbody>
</table>

Ответ №3:

Добавьте этот стиль td

 word-break: break-word;