Adjust the width in the HTML
Did you disable Javascript with your web browser ?will not be able to see any letters of content,
or you will not be able to search this site, or you will not be able to send comment .
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
9
<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 >
Projects 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
9
<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 >
Projects
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
9
<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;" He added.
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
9
<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 >
<wbr> cases still embedded in the back.
Projects
column 1 column 2 column 3 data 1 data 2 0123456789 0123456789 0123456789 0123456789 0123456789 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
9
<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 ><p style = "word-break: break-all;" > 012345678901234567890123456789012345678901234567890123456789</ p ></ td >
</ tr >
</ table >
1
style = "word-break: break-all;"
Example added.
Wrapped only in IE.
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
9
<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 >
Cases)
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
9
<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 >
Cases) (FireFox)
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)*/
} ;
Leave a Reply