HTMLで幅を調整する
HTMLで、よく躓くのは、幅の調整だ。今回は、初級編として、pre , table の幅の固定について調査してみる。
テーブルの幅の問題
一般的に、TABLEは、width（幅）を指定できるのだから、固定できるのでは・・・？
実は、HTMLの勉強を始めたころ、筆者自身もそう思っていた。
例えば、以下のような場合、どうだろう。
1
2
3
4
5
6
7
8
9
| <table width="300px" border="1" bgcolor="#f0f0f0">
<tr>
<td>カラム１</td><td>カラム２</td><td> カラム３</td>
</tr>
<tr>
<td>データ１</td><td>データ２</td><td> データ３</td>
</tr>
</table>
|
実例
| カラム１ | カラム２ | カラム３ |
| データ１ | データ２ | データ３ |
では、次に、このパターンではどうだろう。
1
2
3
4
5
6
7
8
9
| <table width="300px" border="1" bgcolor="#f0f0f0">
<tr>
<td>カラム１</td><td>カラム２</td><td> カラム３</td>
</tr>
<tr>
<td>データ１</td><td>データ２</td><td> 012345678901234567890123456789012345678901234567890123456789</td>
</tr>
</table>
|
実例
| カラム１ | カラム２ | カラム３ |
| データ１ | データ２ | 012345678901234567890123456789012345678901234567890123456789 |
このように突き抜ける。
これを解消するには、tableのスタイルを設定してあげるだけで可能だ。
1
2
3
4
5
6
7
8
9
| <table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;">
<tr>
<td>カラム１</td><td>カラム２</td><td> カラム３</td>
</tr>
<tr>
<td>データ１</td><td>データ２</td><td> 012345678901234567890123456789012345678901234567890123456789</td>
</tr>
</table>
|
style="table-layout: fixed;"が追加されただけだ。
実例
| カラム１ | カラム２ | カラム３ |
| データ１ | データ２ | 012345678901234567890123456789012345678901234567890123456789 |
と、固定されるのがわかる。
ただ、文字は突き抜けている。
文字のつきぬけの問題(連続した半角文字の折り返し)
先のようにテーブルは固定できたが、文字が突き抜ける。これを対処するには、次のように設定すると良い。
- <wbr>或いは半角ブランクを折り返しても良いところに埋め込む
- style="word-break: break-all;"を追加する（IEのみ）
1
2
3
4
5
6
7
8
9
| <table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;white-space: -moz-pre-wrap;">
<tr>
<td>カラム１</td><td>カラム２</td><td> カラム３</td>
</tr>
<tr>
<td>データ１</td><td>データ２</td><td> 0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789</td>
</tr>
</table>
|
<wbr>を折り返しても良いところに埋め込んだ例。
実例
| カラム１ | カラム２ | カラム３ |
| データ１ | データ２ | 012345678901234567890123456789012345678901234567890123456789 |
半角ブランクを折り返しても良いところに埋め込んだ例。
実例
| カラム１ | カラム２ | カラム３ |
| データ１ | データ２ | 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 |
1
2
3
4
5
6
7
8
9
| <table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;white-space: -moz-pre-wrap;">
<tr>
<td>カラム１</td><td>カラム２</td><td> カラム３</td>
</tr>
<tr>
<td>データ１</td><td>データ２</td><td><p style="word-break: break-all;"> 012345678901234567890123456789012345678901234567890123456789</p></td>
</tr>
</table>
|
1
| style="word-break: break-all;"
|
を追加した例。IEのみ折り返される。
実例
| カラム１ | カラム２ | カラム３ |
| データ１ | データ２ | 012345678901234567890123456789012345678901234567890123456789 |
上記以外にもサーバ側の設定等々で切り抜ける方法もある。詳しくは、Googleなどで検索されると良いと思う。
文字のつきぬけの問題(preタグでの折り返し)
先のようにテーブルでは、（完全とはいえないが）固定できたが、以下のようにpreタグでも文字が突き抜ける。
1
2
3
4
5
6
7
8
9
| <table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;">
<tr>
<td>カラム１</td><td>カラム２</td><td> カラム３</td>
</tr>
<tr>
<td>データ１</td><td>データ２</td><td><pre> 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789</pre></td>
</tr>
</table>
|
例）
| カラム１ | カラム２ | カラム３ |
| データ１ | データ２ | 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 |
半角ブランクを折り返しても良いところに埋め込んでも、preタグでくくられると突き抜ける。
これを対処するには、次のように設定すると良い。
style="white-space: -moz-pre-wrap;"(FireFox用),
style="word-wrap: break-word;"(IE用),
style="white-space: -pre-wrap;"(Opera 4-6用),
style="white-space: -o-pre-wrap;"(Opera 7用),
style="white-space: pre-wrap;"(CSS3用)
を設定すればよい。
1
2
3
4
5
6
7
8
9
| <table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;">
<tr>
<td>カラム１</td><td>カラム２</td><td> カラム３</td>
</tr>
<tr>
<td>データ１</td><td>データ２</td><td><pr style="white-space: -moz-pre-wrap;"e> 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789</pre></td>
</tr>
</table>
|
例）(FireFox)
| カラム１ | カラム２ | カラム３ |
| データ１ | データ２ | 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 |
例）(IE)
| カラム１ | カラム２ | カラム３ |
| データ１ | データ２ | 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 |
このpreタグの対策は、CSSファイルに以下のコードを埋め込んで対処しているものが多いようだ。
1
2
3
4
5
6
7
| pre {
white-space: -moz-pre-wrap; /*(FireFox用)*/
word-wrap: break-word; /*(IE用)*/
white-space: -pre-wrap; /*(Opera 4-6用)*/
white-space: -o-pre-wrap; /*(Opera 7用)*/
white-space: pre-wrap; /*(CSS3用)*/
};
|
がおすすめ！！ 
コメントをどうぞ