pre要素

pre要素内のテキストは整形済みテキスト (preformatted text) と見なされ、空白や改行がそのまま表示されます。

<pre>A A  A   A</pre>
<pre>
A
AA
AAA
</pre>

A A  A   A
A
AA
AAA

またその行内に納まらないときも改行されず、スクロールバーが表示されます。

AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA

table内に配置する場合

table要素は既定でその子要素が納まるように幅が調整されるため、preをその子要素とすると親要素の幅を超えて表示されてしまいます。

<table border="1">
  <tr>
    <th>1</th>
    <td><pre>AAAAAAAAAA AAAAAAAAAA …</pre></td>
  </tr>
</table>
1 
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA

この問題はtableの幅を明示し、table-layout:fixedにより固定レイアウトとすることで解決できます。

<table style="width:100%; table-layout:fixed" border="1">
  <tr>
    <th>1</th>
    <td><pre>AAAAAAAAAA AAAAAAAAAA …</pre></td>
  </tr>
</table>
1 
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA

参考

HTMLの情報サイトから、まとめて検索