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

  • 相关阅读:
    高级程序员应该具备什么能力
    二 八 定 律
    二八定律全面分析
    Java 网络爬虫获取网页源代码原理及实现
    vijosP1371 方程的解
    vijosP1413 Valentine’s Present
    vijosP1289 老板娘的促销方案
    vijosP1092 全排列
    vijosP1049 送给圣诞夜的礼品
    vijosP1210 盒子与球
  • 原文地址:https://www.cnblogs.com/monozxy/p/7879595.html
Copyright © 2011-2022 走看看