• 表格样式设计和几点考量


    今天在弹出层,做了一个表格,问题很多。记录一下。有机会再整理。

    首先,是自己的样式检查问题,页面样式做完了,没有放入假数据检查(溢出,太短……),导致后台链接数据后溢出(这里以后要补充“如何体现一个前端的专业性,从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-100px">23232333232</td>
              </tr>
           </tbody>
         </table>
      </body>
    </html>

     最后,关于table有些样式和问题还是挺特殊的。单独找个时间应该好好总结下。

  • 相关阅读:
    MySQL技术内幕(第5版)
    Creo Parametric 4.0基础、进阶、高手一本通
    PostgreSQL 9.0性能调校
    Python程序设计案例课堂
    Creo2.0完全学习手册
    Excel会计电算化与应用(第3版)
    JPEG与RAW的较量 数码影像拍摄与后期全流程详解
    [Objective-c 基础
    [Objective-c 基础
    iOS开发网络篇—GET请求和POST请求(转)
  • 原文地址:https://www.cnblogs.com/monozxy/p/7879595.html
Copyright © 2020-2023  润新知