HTML to adjust the width

Published on| December 23rd, 2009 | No Comment.

Categories:html | Tags: HTML(タグ), pre, table, はみ出る, タグ, 幅

You may have a problem when you adjust width HTML (pre tag , table tag).
It might be a very rudimentary thing. However, you may not be able to clear its problem.

Following content might help you.

Table width problem

In general, It might be thought that it only has to set it because table tag has attribute of width.
TABLE is, width (width), so it can be specified, can be fixed?
In fact, I also had thought so before. ()

For example, let’s think following sample code.

<table width="300px" border="1" bgcolor="#f0f0f0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td> Column 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td> Data 3</td>
</tr>
</table>

Example

Column 1	Column 2	Column 3
Data	Data 2	Data 3

Do you think what occur by next sample ?

<table width="300px" border="1" bgcolor="#f0f0f0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td> Column 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td> 012345678901234567890123456789012345678901234567890123456789</td>
</tr>
</table>

Example

Column 1	Column 2	Column 3
Data	Data 2	012345678901234567890123456789012345678901234567890123456789

So, table width inflates according to characters width.
This problem will clear if you set table style like a following code.

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td> Column 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td> 012345678901234567890123456789012345678901234567890123456789</td>
</tr>
</table>

style = "table-layout: fixed;" just added.
Example

Column 1	Column 2	Column 3
Data	Data 2	012345678901234567890123456789012345678901234567890123456789

So, table width was fixed without any relation to character width.
However, characters exceeds table width.

Problem that characters exceeds any width (wordwrap of no blank characters )

As shown in the table where we have fixed Hami出character would.To avoid this, set to be avoided as follows.

If you set either of the following code, this problem will be cleared.

Embed <wbr> or blank where you may wrap.
Add style = "word-break: break-all;" (IE only)

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;white-space: -moz-pre-wrap;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td> Column 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td> 0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789</td>
</tr>
</table>

Following sample is code that embedded <wbr> where you may wrap.
Example

Column 1	Column 2	Column 3
Data	Data 2	0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

Following sample is code that embedded blank where you may wrap.
Example

Column 1	Column 2	Column 3
Data	Data 2	0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;white-space: -moz-pre-wrap;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td> Column 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>
 012345678901234567890123456789012345678901234567890123456789</td>
</tr>
</table>

Following sample is code that embedded

style="word-break: break-all;"

(only IE).
Example

Column 1	Column 2	Column 3
Data	Data 2	012345678901234567890123456789012345678901234567890123456789

This method is not necessarily the best.
You may find also methods that clear this problem ( ex) Web server setting… ), by Google search.

Problem that characters exceeds any width (pre wrapping tag)

The problem still remains.
Following sample is code that characters exceeds any width with pre tag.

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td> Column 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>&lt;pre&gt; 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789&lt;/pre&gt;</td>
</tr>
</table>

Example)

Column 1	Column 2	Column 3
Data 1	Data 2	0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

Characters with pre tag will exceed any width even if you embed blank where you may wrap.
This problem will clear if you set a following code.
style = "white-space:-moz-pre-wrap;" (FireFox for),
style = "word-wrap: break-word;" (IE for),
style = "white-space:-pre-wrap;" (Opera 4-6 for),
style = "white-space:-o-pre-wrap;" (Opera 7 for),
style = "white-space: pre-wrap;" (CSS3 for / FireFox 3.0 or higher for)

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td> Column 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>&lt;pr style="white-space: -moz-pre-wrap;"&gt; 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789&lt;/pre&gt;</td>
</tr>
</table>

例）(FireFox)

Column 1	Column 2	Column 3
Data 1	Data 2	0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

Example) (IE)

Column 1	Column 2	Column 3
Data 1	Data 2	0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

Check points is a following 2 points.
The point is the following two points.

Embed style = "table-layout: fixed;" with table tag.

Embed a following code in CSS fils with pre tag.

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/FireFox 3.0+)*/
};

You might also like:

Comments

Transrator

Links

Site Description

Joomla!, Wordpress as CMS using a site building, site management, software usage to describe the development tips.

HTML to adjust the width

Table width problem

Problem that characters exceeds any width (wordwrap of no blank characters )

Problem that characters exceeds any width (pre wrapping tag)

You might also like:

Transrator

Recent Posts

Categories

Tag Cloud

Links

Site Description