Usage of table-layout:fixed attribute in css

table-layout:fixed Usage of attribute:
If you want a table with a fixed size, the text inside is forced to wrap (especially in a long string English text, and there is no space in the middle), in order to prevent the long text

from breaking the table, generally use the style: table-layout: fixed. But under Firefox, there will be some problems. Refer to some practices of Gmail, do a few

tests, and come up with a solution.

Example 1: (IE browser) Ordinary situation

CODE:

< ;tr>

abcdefghigklmnopqrstuvwxyz 1234567890

##You can see that width=80 does not work, table Spread open by characters.
Example 2: (IE browser) use style table-layout:fixed

CODE:

< ;/table>

width=80 works, but the table wraps.

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

CODE:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

width=80 works, and line breaks are also eliminated.


Example 4: (IE browser) Use the style table-layout:fixed and nowrap when using a numerical value to fix the td size

CODE:



< td width="20" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890





Unfortunately, the nowrap of the first td does not work


Example 5: (IE browser) Use the style table-layout:fixed with the percentage fixed td size nowrap

CODE:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

Changed to percentage, finally got it done

Example 6: (Firefox browser) Using percentage to fix td size Use the style table-layout: fixed and nowrap effect in this case: Put Example 5 under Firefox, but it fails again

Example 7: (Firefox browser) Use the style table- when using a percentage to fix the td size layout:fixed and nowrap, and use p
CODE:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 123456789 0

The world is finally at peace

Example 8: (Firefox browser) using numerical fixed td Use the styles table-layout:fixed and nowrap in the case of size, and use p

CODE:


CODE:

& lt; td width = "20" class = "td" nowrap & gt; & lt; p & gt; abcdefghigklmnopqrstuvwxyz 1234567890 & lt; & lt;/td & gt;
& lt; td class = td nowrap & gt; & lt; p & gt; abcdefghigklmnopqrstuvwxyz 1234567890

nowrap doesn’t work again
Finally, Example 7 is a solution that works in IE and Firefox can perfectly solve the problem of forced line breaks on pages.

I also continued to check some information. Since the width of the first row only works, can I define the first row?

The colgroup attribute was found.

<table width="100%" border="0" cell
padding
="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"> </td>
 </tr> <tr>
   <td nowrap bgcolor="#FFFFFF">文字文字文字文字文字文字</td>
   <td bgcolor="#FFFFFF"> </td>
   <td bgcolor="#FFFFFF"> </td>
   <td bgcolor="#FFFFFF"> </td>
   <td bgcolor="#FFFFFF"> </td>
 </tr>
 <tr>
   <td bgcolor="#FFFFFF"> </td>
   <td bgcolor="#FFFFFF"> </td>
   <td bgcolor="#FFFFFF"> </td>
   <td bgcolor="#FFFFFF"> </td>
   <td bgcolor="#FFFFFF"> </td>
 </tr></table>

The above is the detailed content of Usage of table-layout:fixed attribute in css. For more information, please follow other related articles on the PHP Chinese website!