表格中TD的novrap属性详解

来源:互联网 发布:淘宝宝贝的链接在哪里 编辑:程序博客网 时间:2024/05/22 08:30

 

  HTML中TD元素的nowrap属性表示禁止单元格中的文字自动换行。

  但使用时要注意的是,td元素noWrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。

  当td设置了nowrap="nowrap"时此列是不允许表格中的文本换行的

  nowrap实例:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格TD中的nowrap详解</title>
</head>
<body>
    <p>没有设置nowrap属性,文字将按照表格的宽度自动换行:</p>
    <table width="300" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>
        </tr>
    </table>

    <p>单元格设置了nowrap属性,未设置width属性时,文字将不顾表格宽度不换行:</p>
    <table width="300" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td nowrap="nowrap">
                我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……
            </td>
        </tr>
    </table>
   
    <p>单元格设置了nowrap属性,也设置了width属性,nowrap将失效,文字将按照列宽自动换行:</p>
    <table width="300" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td nowrap="nowrap" width="200">
                我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……
            </td>
        </tr>
    </table>
</body>
</html>

 

 

原创粉丝点击