Css Table防溢出二三事

2011-12-07 14:12:50 作者： 所属分类：Web前端 阅读：630 评论：18

标签： , , , , , , ,

最近在做项目的时候遇到了个关于Table布局防溢出的问题。在网页中一般的div和标签的防溢出都有overflow一夫当关万夫莫开。但是关于Table可就不买这个单了。。。table的列都是有具体的宽度限制的，但是高度限制却不起作用，当文字超出宽度时文字会自动换行，如此宽度是不会超，但高度却被撑了。。所以关于这个，是很多人都遇到的棘手问题。下面就来说说解决方案。
   

  1. <style type="text/css">   
  2. table.table{table-layout:fixed; line-height:24px; width:520px; overflow:hidden;}   
  3.     table.table td{border:solid 1px #1FA834; padding-left:10px;}   
  4.         table.table .td0{ width:153px;}   
  5.         table.table .td1{ width:110px;}   
  6.         table.table .td2{ width:130px;}   
  7.         table.table .td3{ width:131px;}   
  8.         table.table td strong{ display:block; width:100%; font-weight:normal;text-overflow: ellipsis;whitewhite-space:nowrap;word-break:keep-all;}   
  9.         table.table tr td, table.table tr strong{whitewhite-space:nowrap;overflow: hidden; font-weight:normal;}   
  10. </style>  

   

  1. <table class="table" cellpadding="0" cellspacing="0">   
  2.     <tr>   
  3.         <td class="td0"><strong><a href="javascript:" onfocus='this.blur()'>Css Table防溢出二三事，IT伯伯</a></strong></td>   
  4.         <td class="td1"><strong>itboboCss Table防溢出二三事</strong></td>   
  5.         <td class="td2"><strong>Css Table防溢出二三事，IT伯伯</strong></td>   
  6.         <td class="td3"><strong>Css Table也玩overlow</strong></td>   
  7.     </tr>   
  8.     <tr>   
  9.         <td><a href="javascript:" onfocus='this.blur()'>itboboCss Table防溢出二三事</a></td>   
  10.         <td>itboboCss Table防溢出二三事</td>   
  11.         <td>Css Table防溢出二三事，IT伯伯</td>   
  12.         <td>Css Table也玩overlow</td>   
  13.     </tr>   
  14. </table>   

   

css和html内容如上这般写，表格table的防溢出效果便完全有效了。
代码虽全在此，但不见得你就看到了问题的关键所在哦。.td都是有宽度限制的，在这里如果宽度是百分比，这个问题就不需要这么复杂了。我还是着重说说宽度不是百分比时的几个要点吧：

1.table样式的table-layout:fixed;这个属性也很重要，只要为fixed的时候后面的才是有效的.因为fixed表示表格是按照给定的宽度，而auto属性值则是随内容变化宽度的；

2.td的宽度是不能直接用<td width="120"></td>这种方式的；

3.只能用css定义样式，然而在引用样式的时候也是有格外要求的：td与td内的内容直接还需要额外的加个简易的标签（如：a，sapn，strong之类），我这里用到了a和strong，完全在于你使用时的需要；

4.css里的重点大家应该很容易看出来的，自然就是最后一句里的“whitewhite-space:nowrap;overflow: hidden;”；不过倒数第二句里的“text-overflow: ellipsis;whitewhite-space:nowrap;word-break:keep-all;”这个也是不容忽视的哟~~有前面那句防溢出的效果是已经达到了的，那后面这句的效果在哪里呢？如下图看以上代码的效果图：

大家会发现，表格的所有列防溢出效果已经实现，但是第一行和第二行却稍有不同，做这样的效果也是为了让大家看到这个微小的区别。仔细去看看代码，你会发现第二行没有引用到css里倒数第二句的样式效果，也就是说，在溢出时隐藏且自动输出省略号的效果就是“text-overflow: ellipsis;whitewhite-space:nowrap;word-break:keep-all;”这个做得的。

 

说得有些啰嗦了，聪明的大家没有厌烦吧！现在大家应该都很清楚了的咯~~

» 郑重声明：本文由love发布，所有内容仅代表个人观点。版权归IT伯伯和love共有，欢迎转载， 但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。
【上一篇】
【下一篇】

目前有 18 条留言 其中：访客:16 条, 博主:1 条

  1. Anshao微博客 Google Chrome Windows : 2011年12月19日23:56:03 5楼 @回复 回复

    :!: 最近接触CSS呢…

    • love CHINA Google Chrome Windows : 2011年12月20日10:21:04 @回复 回复

      呵呵~~css还是比较简单的，就是特殊情况的处理会比较纠结 :smile:

      • Anshao微博客 Google Chrome Windows : 2011年12月20日16:06:29 @回复 回复

        :oops: 我还是觉得挺难的说..

        • love CHINA Google Chrome Windows : 2011年12月20日16:35:52 @回复 回复

          Css的样式和属性值就那么几十个，都记住应该是不难的。。 :smile: 主要是把那些仅有的属性值运用得恰到好处和对页面框架的把握稍微难点。。。使用的时候不要有畏惧心理应该会轻松些 :smile:

          • Anshao微博客 Google Chrome Windows : 2011年12月20日17:12:48 @回复 回复

            :twisted: 记不是很难..应用就力不从心啦..不给力的说..呵呵..

            • love CHINA Google Chrome Windows : 2011年12月20日19:02:58 @回复 回复

              呵呵，多做做就好了的~~这些东西需要实战 :smile:

  2. 风 Internet Explorer Windows : 2011年12月08日18:25:38 4楼 @回复 回复

    这个是好东西，值得收藏！ :???:

    • BeautySky CHINA Google Chrome Windows : 2011年12月10日09:08:16 @回复 回复

      自己工作上遇到的问题，解决后的心得。。你以后也可以总结些出来。。。 :smile:

  3. 木叶 CHINA Internet Explorer Windows : 2011年12月08日08:35:25 地板 @回复 回复

    真是生活中的有心人啊！这些技术性的文章我虽然看不懂，但还是支持下！ :smile:

    • BeautySky CHINA Google Chrome Windows : 2011年12月10日09:09:00 @回复 回复

      呵呵~~自己遇到的问题，总结出来也算是收藏了~~~怕以后忘了嘛。。 :neutral:

  4. IT路人 CHINA Google Chrome Windows : 2011年12月07日18:40:14 板凳 @回复 回复

    你的网站的相关性呢 :sad:

    • 过客小小 CHINA Internet Explorer Windows : 2011年12月07日19:49:16 @回复 回复

      站长并没有说明网站主题是技术有关或是娱乐有关呀，这是个人网站，记录站长的点点滴滴，生活、工作、学习、娱乐……细心体会，会发现站长真是用心在生活的人啊！ :eek:

      • 头像 IT伯伯 CHINA Mozilla Firefox Windows : 2011年12月07日20:04:29 @回复 回复

        呵呵，小小说的不错，我原本的定位就是在技术和生活之间的。

        • 过客小小 CHINA Internet Explorer Windows : 2011年12月08日19:01:42 @回复 回复

          被表扬啦啦啦啦啦啦 :mrgreen:

  5. 金康 CHINA Internet Explorer Windows : 2011年12月07日14:38:25 沙发 @回复 回复

    哎 悲剧的，看不懂是什么东西

    • love CHINA Google Chrome Windows : 2011年12月07日14:42:02 @回复 回复

      :neutral: 你就希望看到的都￥￥￥￥￥是吧？

    • love CHINA Google Chrome Windows : 2011年12月07日14:43:37 @回复 回复

      开玩笑咯~~http://www.itbobo.com/penetrating-episode-1.html
      这个可能比较复合你的心理呢~~嘿嘿 :mrgreen:

查看来自外部的引用: 1

给我留言


插入图片

页面载入中..

展开