HTML <td> 标签的 nowrap 属性

定义和用法

nowrap 属性规定表格单元格中的内容不换行。

浏览器支持

尽管不赞成使用 nowrap 属性,但是所有浏览器都支持它。

兼容性注释

在 HTML 4.01 中,不赞成使用 td 元素的 nowrap 属性;在 XHTML 1.0 Strict DTD 中,不支持 td 元素的 nowrap 属性。

请使用 CSS 代替。

CSS 语法:<td style="white-space: nowrap">

<html>
<body>

<table border="1">
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

</body>
</html>


转载于:https://my.oschina.net/u/2308739/blog/651253

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您想要实现的效果是固定表格的前四列,使其在滚动时保持在原位,而其余列则可以自由滚动。这可以通过CSS的固定定位和overflow属性来实现。 首先,将表格的前四列放入一个单独的div,并将其设置为固定定位: ```html <div class="fixed-columns"> <table> <tr> <td class="dg">加粉日期</td> <td class="dg">总推广费</td> <td class="dg">总加粉数</td> <td class="dg">总客户数</td> </tr> <!-- 前四列数据 --> </table> </div> ``` ```css .fixed-columns { position: fixed; top: 0; left: 0; z-index: 1; } ``` 然后,将整个表格放入另一个div,并将其设置为overflow:auto以启用滚动: ```html <div class="scrolling-table"> <table> <tr> <td class="dg">加粉日期</td> <td class="dg">总推广费</td> <td class="dg">总加粉数</td> <td class="dg">总客户数</td> <!-- 前四列数据 --> {volist name="fields" id="fv"} <td>{$fv}</td> {/volist} </tr> {volist name="time_arr" key="k" id="tv"} <tr> <td class="dg">{$tv.add_fans_time}</td> <td class="dg">{$tv.promotion_fee|default='-'}</td> <td class="dg">{$tv.add_fans|default='-'}</td> <td class="dg">{$tv.customer_number|default='-'}</td> <td class="dg">{$tv.order_money|default='-'}</td> <!-- 后面列数据 --> {volist name="fields" id="fsv"} <td><?php echo isset($tv[$fsv]) ?$tv[$fsv]:'-'; ?></td> {/volist} </tr> {/volist} </table> </div> ``` ```css .scrolling-table { overflow: auto; margin-top: 20px; /* 避免表格被固定的四列遮挡 */ } .scrolling-table td { white-space: nowrap; /* 避免单元格换行 */ } ``` 这样,表格的前四列将保持在固定位置,而其余列将在滚动时自由移动。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值