首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

如何给table td 设置宽度

建站高手 2015-5-13 [html] 来自PC 复制链接
510452
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
表格table中你设置了宽度,但是换行的时候表格的th和td并不认,原因主要是单独设置的文字长度换行的问题。

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大。

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

  1. <table style=”table-layout:fixed” width=”200″>
  2. <tr>
  3. <td>aaaaaaaaaaaaaabbbbbbbbbbbbbbbbbcccccccccccc
  4. </td>
  5. </tr>
  6. </table>
复制代码


效果:隐藏多余内容

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

  1. <table width=”200″ style=”table-layout:fixed;”>
  2. <tr>
  3. <td width=”25%” style=”word-break : break-all; “>aaaaaaaaaaaaaabbbbbbbbbbbbbbbbbcccccccccccc
  4. </td>
  5. <td style=”word-wrap : break-word ;”>aaaaaaaaaaaaaabbbbbbbbbbbbbbbbbcccccccccccc
  6. </td>
  7. </tr>
  8. </table>
复制代码


效果:可以换行

3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法

4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用

  1. <table style=”table-layout:fixed” width=”200″>
  2. <tr>
  3. <td width=”25%”  style=”word-break : break-all; overflow:hidden; “>aaaaaaaaaaaaaabbbbbbbbbbbbbbbbbcccccccccccc</td>
  4. <td width=”75%” style=”word-wrap : break-word; overflow:hidden; “>aaaaaaaaaaaaaabbbbbbbbbbbbbbbbbcccccccccccc</td>
  5. </tr>
  6. </table>
复制代码



上一篇:亮剑最新SEO 6.3.1 价值1,088.00 元官方购买,永久更新服务100%可用,RMB够买的
下一篇:CSS样式表嵌入到网页中的几种方法
济南华工 发表于 2015-5-13 14:14:14 来自PC
强烈支持,站帮网有你更精彩
济南华工液压升降机www.jnhgjx.com电动升降机[url=http://www.jnhgjx.cn
362938688 发表于 2015-5-19 12:24:41 来自PC
这还是代码,我不会的
www.yandaoqingxi.cn|www.jjpd888.com|www.jjjnews.top|www.bjxdc2001.com|www.gchb001.com|www.seoh.cn网站推广
362938688 发表于 2015-5-20 14:35:43 来自PC
嵌套不了做
lelegoer 发表于 2015-5-21 15:32:41 来自PC
真是难得给力的帖子啊。
miyukong.com yihaojiayuan,.com howdian.com
362938688 发表于 2015-6-2 17:40:21 来自PC
隐藏超出内容,这里overflow:auto;无法起作用
www.yandaoqingxi.cn|www.jjpd888.com|www.jjjnews.top|www.bjxdc2001.com|www.gchb001.com|www.seoh.cn网站推广
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表