zoukankan      html  css  js  c++  java
  • 表格样式设计和几点考量

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

    首先,是自己的样式检查问题,页面样式做完了,没有放入假数据检查(溢出,太短……),导致后台链接数据后溢出(这里以后要补充“如何体现一个前端的专业性,从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有些样式和问题还是挺特殊的。单独找个时间应该好好总结下。

  • 相关阅读:
    使用Jackson对字典翻译
    通过代理的方式实现对httpClient的监控,超时回调
    mapstruct 1.4.2和lombok 1.18.16之后版本,报错和mapstruct生成空的实现
    jenkins + sonar 中文文件名报错解决
    linux 启动jar脚本
    easyUI关键(常见)组件详解
    shiro三连斩之概念
    SpringMVC请求参数总结
    springboot jsp,过滤器,拦截器
    CentOS添加使用
  • 原文地址:https://www.cnblogs.com/monozxy/p/7879595.html
Copyright © 2011-2022 走看看