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有些样式和问题还是挺特殊的。单独找个时间应该好好总结下。

  • 相关阅读:
    mysql 设置密码
    linux 下如何抓取HTTP流量包(httpry)
    m2a-vm超频的方法
    生产服务器环境最小化安装后 Centos 6.5优化配置备忘
    CentOS关闭休眠和屏保模式
    微信公众平台开发教程第2篇-----微信开发者接入
    微信公众平台开发教程第1篇-新手解惑
    android 文件读取(assets、raw)
    员工培训的七大误区和三个内核价值
    从业务专家进阶到管理者
  • 原文地址:https://www.cnblogs.com/monozxy/p/7879595.html
Copyright © 2011-2022 走看看