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:
abcdefghigklmnopqrstuvwxyz 1234567890 |
< ;/table>
width=80 works, but the table wraps.
Example 3: (IE browser) using styles table-layout:fixed and nowrap
CODE:
abcdefghigklmnopqrstuvwxyz 1234567890 | tr>
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:
abcdefghigklmnopqrstuvwxyz 1234567890
abcdefghigklmnopqrstuvwxyz 1234567890 |
table>
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 | > ;
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!
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn