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

  • 相关阅读:
    How To Verify TLS Options in Windows
    How to auto-generate a C# class file from a JSON string [closed]
    javascript-questions
    What is the difference between application server and web server?
    Manjaro Rust环境搭建
    Trojan
    50 年的软件开发经验带给我的 63 个启示
    对《GGX》shader的分析-卡通渲染-罪恶装备
    科学迷信
    Tokio,Rust异步编程实践之路
  • 原文地址:https://www.cnblogs.com/monozxy/p/7879595.html
Copyright © 2011-2022 走看看