td nowrap css nowrap usage instructions and precautions_experience exchange

Ask a question:

The effect is the same whether I set nowrap or not. The table automatically stretches with the text, why?

→Answer the question:
The behavior of the noWrap attribute of the TD element is related to the width attribute of the TD element.

◆If the TD width is not set, the noWrap attribute is effective.
◆If the TD width is set, the noWrap attribute has no effect.

Sample file, click the run button to see the effect:

<title>www.jb51.net Script House wrap attribute research</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <p>Test string:</p> <p>I finally understood that I actually have a resilient life, which is much stronger and more wear-resistant than the life I imagined...</p> <p>Empty table with cell nowrap attribute not set:</p> <table width="100" border="1" cellspacing="0" cellpadding="0"><tr> <td> </td> </tr></table> <p>Add test string:</p> <table width="100" border="1" cellspacing="0" cellpadding="0"><tr> <td>I finally understood that I actually have a resilient life, which is much stronger and more wear-resistant than the life I imagined...</td> </tr></table> <p>The cell has the nowrap attribute set, but the width attribute is not set:</p> <table width="100" border="1" cellspacing="0" cellpadding="0"><tr> <td nowrap>I finally understand that I actually have a resilient life, which is much stronger and more wear-resistant than the life I imagined...</td> </tr></table> <p>The cell has the nowrap attribute set and the width attribute also set:</p> <table width="200" border="1" cellspacing="0" cellpadding="0"><tr> <td width="120" nowrap>I finally understand that I actually have a resilient life, which is much stronger and more wear-resistant than the life I imagined...</td> <td> </td> </tr></table>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]