标签：nowrap deb 导致 链接 psi 问题 宽度 常见 html
今天在弹出层，做了一个表格，问题很多。记录一下。有机会再整理。
首先，是自己的样式检查问题，页面样式做完了，没有放入假数据检查（溢出，太短……），导致后台链接数据后溢出(这里以后要补充“如何体现一个前端的专业性，从debug和测试内容说起” )；
其次，一般表格设计通用规则和常见问题：
①表头被td挤到竖起来：某一列中的td特别长的时候，其他列会被挤到最小空间，标题会竖起来很不美观。
解决方法：规范写法，设置为th，给th加样式：
th{
white-space:nowrap;
}
ps.th单独设计个颜色跟其他td区分；此处可以结合其他优秀的表格进行分解，反向设计。
②表格内容过多，宽度不够。td数据过长，整体样式用户体验太差。
解决方法： 加入横向滚动条，根据每一列数据特点预先设置最小/最大长度，强制其折行/不折行。
对过长数据进行省略（…）处理，鼠标划过用title展示全文；
一个参考的写法，群友给我的。
1 <style> 2 .target_parent{ 3 display : table; 4 width : 100% ; 5 } 6 .target{ 7 word-wrap : break-word; 8 max-height: 40px; 9 overflow-y: hidden; 10 text-overflow: ellipsis-word; 11 } 12 </style>
<html> <head></head> <body> <table class=“target_parent”> <tbody> <tr> <td class="target" style="max-width:100px">23232333232</td> </tr> </tbody> </table> </body> </html>
最后，关于table有些样式和问题还是挺特殊的。单独找个时间应该好好总结下。
标签：nowrap deb 导致 链接 psi 问题 宽度 常见 html
原文地址：http://www.cnblogs.com/monozxy/p/7879595.html
