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:
55ca1835f91c9648b39de69548f52b94< ;tr>b6c5a531a458a2e790c1fd6421739d1cabcdefghigklmnopqrstuvwxyz 1234567890b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5f16b1740fad44fb09bfe928bcc527e08

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

CODE:
c9ccee2e6ea535a969eb3f532ad9fe89
.tbl {table-layout:fixed;}
531ac245ce3e4fe3d50054a55f265927
bd15be2d11762f0b3b97bc913455fffda34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1cabcdefghigklmnopqrstuvwxyz 1234567890b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5< ;/table>

width=80 works, but the table wraps.

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

CODE:
c9ccee2e6ea535a969eb3f532ad9fe89
.tbl {table-layout:fixed; }
531ac245ce3e4fe3d50054a55f265927
bd15be2d11762f0b3b97bc913455fffda34de1251f0d9fe1e645927f19a896e8904b6b39b75ef1127fe85748522f0103abcdefghigklmnopqrstuvwxyz 1234567890b90dd5946f0946207856a8a37f441edf2688fc03e5140d9bef12bef73424f836f16b1740fad44fb09bfe928bcc527e08

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:
c9ccee2e6ea535a969eb3f532ad9fe89
.tbl {table-layout:fixed;}
531ac245ce3e4fe3d50054a55f265927
9b9734549ea7b624dbc2af13c4f29627
a34de1251f0d9fe1e645927f19a896e8
b78f2f9b2422d5f6954d02e67ff028a4abcdefghigklmnopqrstuvwxyz 1234567890b90dd5946f0946207856a8a37f441edf
904b6b39b75ef1127fe85748522f0103abcdefghigklmnopqrstuvwxyz 1234567890b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
e6d621a2912e784107ba307ae077a6ca


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:
c9ccee2e6ea535a969eb3f532ad9fe89
.tbl {table-layout:fixed;}
531ac245ce3e4fe3d50054a55f265927
2e4483dae27c6ad00b97e17bc9969740
a34de1251f0d9fe1e645927f19a896e8
f5da7e64c1d582ae42f138431ac70fc5abcdefghigklmnopqrstuvwxyz 1234567890b90dd5946f0946207856a8a37f441edf
904b6b39b75ef1127fe85748522f0103abcdefghigklmnopqrstuvwxyz 1234567890 fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

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:
c9ccee2e6ea535a969eb3f532ad9fe89
.tbl {table-layout:fixed;}
.td {overflow:hidden; }
531ac245ce3e4fe3d50054a55f265927
bd15be2d11762f0b3b97bc913455fffd
a34de1251f0d9fe1e645927f19a896e8
06dc17bd7afb62e77d7096200fd49c29
e388a4556c0f65e1904146cc1a846beeabcdefghigklmnopqrstuvwxyz 123456789094b3e26ee717c64999d7867364b1b4a3b90dd5946f0946207856a8a37f441edf
b6d1ee9f3790111b68ab4802cc9def00e388a4556c0f65e1904146cc1a846beeabcdefghigklmnopqrstuvwxyz 123456789 094b3e26ee717c64999d7867364b1b4a3
b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

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:
c9ccee2e6ea535a969eb3f532ad9fe89
.tbl {table-layout:fixed;}
.td { overflow:hidden;}
531ac245ce3e4fe3d50054a55f265927

CODE:
bd15be2d11762f0b3b97bc913455fffd
& 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 123456789094b3e26ee717c64999d7867364b1b4a3b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

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!