Use of the Table-layout:fixed property in CSS

Use of the Table-layout:fixed property:
If you want a table fixed size, the text inside is forced to wrap (especially in a long string of English text, and there is no space in the middle of the case) in order to achieve the text that is too long

The purpose of not bursting tables is generally to use the style: Table-layout:fixed. But under Firefox, there will be some problems, refer to some Gmail practices, do a few

Test, a solution is obtained.

Example 1: (ie browser) general situation

CODE:
<table border= "1" width= "><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr" ></table>

You can see that the width=80 is not working, and the table is open with characters.

Example 2: (ie browser) using style table-layout:fixed

CODE:
<style>
. tbl {table-layout:fixed;}
</style>
<table class= "TBL" border= "1" width= "><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td" ></tr></table>

Width=80 worked, but the table was wrapped.

Example 3: (IE) using styles table-layout:fixed and nowrap

CODE:
<style>
. tbl {table-layout:fixed;}
</style>
<table class= "TBL" border= "1" width= "&GT;&LT;TR&GT;&LT;TD nowrap>abcdefghigklmnopqrstuvwxyz 1234567890<" /td></tr></table>

Width=80 worked, and the line was killed.


Example 4: (IE) use style table-layout:fixed with nowrap when using numeric fixed TD size

CODE:
<style>
. tbl {table-layout:fixed;}
</style>
<table class= "TBL" Border=1 width=80>
<tr>
&LT;TD width= "NOWRAP&GT;ABCDEFGHIGKLMNOPQRSTUVWXYZ" 1234567890</td>
&LT;TD nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>


Unfortunately, the first TD's nowrap didn't work.


Example 5: (IE) use style table-layout:fixed with nowrap when using percentage fixed TD size

CODE:
<style>
. tbl {table-layout:fixed;}
</style>
<table class= "TBL" border= "1" width= ">"
<tr>
&LT;TD width= "25%" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
&LT;TD nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>

Change to a percentage, and finally fix it.

Example 6: (Firefox browser) use the style table-layout:fixed and nowrap effect with the percentage fixed TD size: put example 5 under Firefox, and it's dead.

Example 7: (Firefox browser) use the style table-layout:fixed and nowrap with the percentage fixed TD size, and use P
CODE:
<style>
. tbl {table-layout:fixed;}
. td {Overflow:hidden;}
</style>
<table class= "TBL" border= "1" width= ">"
<tr>
&LT;TD width= "25%" class= "TD" Nowrap>
&LT;P&GT;ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890</p></td>
&LT;TD CLASS=TD nowrap><p>abcdefghigklmnopqrstuvwxyz 1234567890</p>
</td>
</tr>
</table>

The world is finally in peace.

Example 8: (Firefox browser) use the style table-layout:fixed with nowrap when using numeric fixed TD size, and use P

CODE:
<style>
. tbl {table-layout:fixed;}
. td {Overflow:hidden;}
</style>

CODE:
<table class= "TBL" border= "1" width= ">"
<tr>
&LT;TD width= "class=" TD "Nowrap><p>abcdefghigklmnopqrstuvwxyz 1234567890</p></td>
&LT;TD CLASS=TD nowrap><p>abcdefghigklmnopqrstuvwxyz 1234567890</p></td>
</tr>
</table>

NoWrap's not working anymore.
In the end, example 7 is a solution that can be used to solve page-forced line-wrapping problems perfectly in IE and Firefox.

I also went on to check some information, since the first line of the width of the work, then I can define the first line.

The Colgroup attribute was found.

<table width= "100%" border= "0" cellpadding= "3" cellspacing= "1" bgcolor= "#000000" style= "table-layout:fixed" > <colgroup><col style= "width:10%;" ></col><col style= "width:30%;" ></col><col style= "width:40%;" ></col><col style= "width:10%;" ></col><col></col></colgroup><tr> <td colspan= "5" >&nbsp;</td> </tr> <tr> <td nowrap bgcolor= "#FFFFFF" > Literal text </td> <td bgcolor= "#FFFFFF" >& nbsp;</td> <td bgcolor= "#FFFFFF" >&nbsp;</td> <td bgcolor= "#FFFFFF" >&nbsp;</td > <td bgcolor= "#FFFFFF" >&nbsp;</td> </tr> <tr> <td bgcolor= "#FFFFFF" >&nbsp; </td> <td bgcolor= "#FFFFFF" >&nbsp;</td> <td bgcolor= "#FFFFFF" >&nbsp;</td> &lt TD bgcolor= "#FFFFFF" >&nbsp;</td> <td bgcolor= "#FFFFFF" >&nbsp;</td> </tr></ Table>