网页制作-TD也可以溢出隐藏显示.doc
网页制作-TD也可以溢出隐藏显示.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 网页 制作 TD 可以 溢出 隐藏 显示
- 资源描述：
-
回头来看看Table：TD也玩overflow:hidden. 或许我这篇文章一取这样的名字，就会有人要问了：你怎么还在关注table啊，那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了，不知道还有什么好了。 table真的过时了么？你真的了解table么？你真的会用table么？ 打口水仗不是我们要做的，留给那些时间很充裕的人吧。 言归正传： 不记得是什么时候，有人在用table模拟DataGrid的时候说，为什么td超出设置为固定宽度的文字不能隐藏，而是会直接换行呢？ 是的，事实确实如此，如： 代码如下: <style type="text/css"> table {width:500px;table-layout:fixed;} .col1 {width:100px;} .col2 {width:200px;} .col3 {width:200px;} td {white-space:nowrap;overflow:hidden;} </style> <table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden"> <tr> <td class="col1">神舟 优雅Q400N</td> <td class="col2">优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td> <td class="col3">迅驰4平台，突出的性价比，漂亮的外观</td> </tr> </table> 提示：您可以先修改部分代码再运行 运行如上代码，你会发现单元格里超过固定宽度的文字不会被隐藏掉，而是换行显示了，显然，这并不是我的本意。 看起来，这似乎是table的一个特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的组合，说到底就是white-space:nowrap这个东东没起作用，所以看起来overflow:hidden就失效了。{注：如果是一连串的无意义字符则可生效，例如：<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>，这个时候就不需要{white-space:nowrap}来强制它在一行内显示，因为这一连串的a会被认定为是一个字而不发生换行，从而超出.col1宽度的a会被隐藏} ［解决方案一：］ 后来有人提到使用百分比宽度就可以了，经测试，确实可以，稍微将第一段的其中几行样式修改一下，其它的不变： .col1 {width:20%;} .col2 {width:40%;} .col3 {width:40%;} 将修改后的代码运行后，会发现，超出宽度的文字果然被隐藏了，想要的效果似乎得到了。 事实上使用百分比宽度确实可以解决这个文字隐藏的问题，但这似乎并不是想要的最佳的解决方案，因为有的时候我们需要的是一个固定的宽度，而不是百分比宽度。 而这一切的根源就在于如何使得单元格内的文字不换行在一行内显示。 ［解决方案二：］ 要达到这个要求，除了使用样式，我们也许还会想到一个许久不用了的标签<nobr>，这个元素的作用就是强制内容在一行显示。以上代码做如下修改，其它则不变： <table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden"> <tr> <td class="col1"><nobr>神舟 优雅Q400N</nobr></td> <td class="col2"><nobr>优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</nobr></td> <td class="col3"><nobr>迅驰4平台，突出的性价比，漂亮的外观</nobr></td> </tr> </table> 做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。 沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。 既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？ 最佳方案： 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <title>回头来看看Table：TD也玩overflow:hidden</title> <style type="text/css"> table {width:500px;table-layout:fixed;} .col1 {width:100px;} .col2 {width:200px;} .col3 {width:200px;} th strong {display:block;width:100%;} tr strong,tr td {white-space:nowrap;overflow:hidden;} </style> </head> <body> <table border="1" cellspacing="0" summary="测试"> <thead> <tr> <th class="col1"><strong>产品名称</strong></th> <th class="col2"><strong>产品介绍</strong></th> <th class="col3"><strong>产品备注</strong></th> </tr> </thead> <tbody> <tr> <td>神舟 优雅Q400N</td> <td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td> <td>迅驰4平台，突出的性价比，漂亮的外观</td> </tr> </tbody> </table> </body> </html> 提示：您可以先修改部分代码再运行 运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/9780979.html