div 、table中td 内容过长不换行处理 ，以及 col 标签使用

刚整了好一会儿，在同事的帮助下搞定了

 

设置

1. table 的宽度 <table style="table-layout:fixed; width:100%">

2. col 设置td宽度 <col style="width:150px;" />

3. td 中设置 <td style="text-overflow:ellipsis;  overflow:hidden;">

 

 

<col> 标签的使用

col 元素占用的空间就是它显示内容需要的空间。width 属性用于为 col 元素设置预定义的宽度。

<table class="grid" border="1" width="100%">

    <col width="100" />

    <col width="50" />

    <tr>

       <th>Month</th>

       <th>Savings</th> </tr>

    <tr>

       <td>January</td>

       <td>$100</td> </tr>

</table>

 

 

一般的文字截断（适用于内联与块）：

.text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ } 

 

 

==一段自己常用的table css & js

table class="grid"

 

.grid {width:100%;text-align:center;} .grid thead {margin:100px;} .grid thead th{line-height:28px;height:28px; background:url(../images/secdM_normal.png) left -43px repeat-x;border-top:1px #D7D7D4 solid;border-bottom:1px #D7D7D4 solid; color:#666;} .grid tbody tr{line-height:28px;height:30px;} .grid tbody td{word-break:break-all;border-bottom:1px #d7d7d7 dotted;} .grid tfoot tr{ line-height:30px; height:30; background-color:#fff;} .grid tfoot td{ text-align:right; padding-right:5px;} /**grid view 换色**/ .even{background-color:#FEF8F4;} .over{background-color: #ffc;} 

 

jQuery

 

/* 表格行显示效果 */

jQuery(function($){ $(".grid tr").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }); $(".grid tr:even").addClass("even"); }); 

 

 

 

 

==============================================

点缀娱乐 点缀娱乐 点缀娱乐 点缀娱乐 点缀娱乐 点缀娱乐 点缀娱乐 点缀娱乐 

==============================================