Adjust the width in the HTML
Published on| April 7th, 2009 | No Comment.
Categories:html |
You might often fail is adjust the width of HTML.
This is a Chapter Elementary, pre, table out into a fixed width.
Table width problem
In general, TABLE is, width (W) it can specify, can be fixed?
In fact, HTML When I began studying, I had to think so himself.
For example, if you like: I do not know.
1 2 3 4 5 6 7 8 | <TABLE width="300" 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> |
| Column 1 | Column 2 | Column 3 |
| Data 1 | Data 2 | Data 3 |
So, then, how about this pattern.
1 2 3 4 5 6 7 8 | <TABLE width="300" 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> |
| Column 1 | Column 2 | Column 3 |
| Data 1 | Data 2 | 012345678901234567890123456789012345678901234567890123456789 |
To go through this.
To resolve this, table it can only get to set the style.
1 2 3 4 5 6 7 8 | <TABLE width="300" 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> |
Projects
| Column 1 | Column 2 | Column 3 |
| Data 1 | Data 2 | 012345678901234567890123456789012345678901234567890123456789 |
And see that fixed.
The characters are penetrate.
Problem that character pierces though (in the back of consecutive characters)
The character pierces though the table was able to be fixed. .
To address this, a good idea to set the following.
- <wbr> still embedded in the return of characters or blank
- style = "word-break: break-all;" to add (IE only)
1 2 3 4 5 6 7 8 | <TABLE width="300" 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> |
Projects
| Column 1 | Column 2 | Column 3 |
| Data 1 | Data 2 | 0123456789 |
Embed a good example to return the blank characters.
Projects
| Column 1 | Column 2 | Column 3 |
| Data 1 | Data 2 | 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 |
1 2 3 4 5 6 7 8 | <TABLE width="300" 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><p style="word-break: break-all;"> 012345678901234567890123456789012345678901234567890123456789</p></TD> </TR> </TABLE> |
1 | style="word-break: break-all;" |
Projects
| Column 1 | Column 2 | Column 3 |
| Data 1 | Data 2 | 012345678901234567890123456789012345678901234567890123456789 |
Server-side configuration, etc. In addition to these people survive in some way.
For more information, Google is a good think and search.
TSUKINUKE issues of character (pre wrapping tags)
In the table as before, (but not perfect) but it fixed, go through the following characters in the pre tag.
1 2 3 4 5 6 7 8 | <TABLE width="300" 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><pre> 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789</pre></TD> </TR> </TABLE> |
| Column 1 | Column 2 | Column 3 |
| Data 1 | Data 2 |
0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 |
Embedded in the return of the good characters blank, pre KUKURA tags will go through.
To address this, a good idea to set the following.
style = "white-space:-moz-pre-wrap;" (FireFox for),
style = "word-wrap: break-word;" (IE-),
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)
How do I set up.
1 2 3 4 5 6 7 8 | <TABLE width="300" 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><pr style="white-space: -moz-pre-wrap;"e> 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789</pre></TD> </TR> </TABLE> |
| Column 1 | Column 2 | Column 3 |
| Data 1 | Data 2 |
0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 |
Cases) (IE)
| Column 1 | Column 2 | Column 3 |
| Data 1 | Data 2 |
0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 |
This measures the pre tags, CSS seems to have addressed many of the following code to embed the file.
1 2 3 4 5 6 7 | pre { white-space: -moz-pre-wrap; /*(for FireFox)*/ word-wrap: break-word; /*(for IE)*/ white-space: -pre-wrap; /*(for Opera 4-6)*/ white-space: -o-pre-wrap; /*(for Opera 7)*/ white-space: pre-wrap; /*(for CSS3)*/ }; |
You might also like:
Add to your favorites(bookmarks):
Trackback URL
After Admin approves this comment, it will be shown.
Comments
Leave a Reply
Tag Cloud
Links
Site Description
This site is support & information site of WEB,and Software. This site might help you that create software or Web Site…perhaps?
Add to your favorites(bookmarks)