表格样式设计和几点考量
Posted 默诺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格样式设计和几点考量相关的知识，希望对你有一定的参考价值。
今天在弹出层，做了一个表格，问题很多。记录一下。有机会再整理。
首先，是自己的样式检查问题，页面样式做完了，没有放入假数据检查（溢出，太短……），导致后台链接数据后溢出(这里以后要补充“如何体现一个前端的专业性，从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有些样式和问题还是挺特殊的。单独找个时间应该好好总结下。
以上是关于表格样式设计和几点考量的主要内容，如果未能解决你的问题，请参考以下文章